官方解釋：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。
個人理解：組件間傳參使用，不用考慮父子組件關係或者非父子組件關係
vuex官網：https://vuex.vuejs.org/zh/ 點擊打開鏈接
安裝：cnpm install vuex --save
註冊vuex
新建存放vuex的文件store/index.js
引用並聲明vuex
import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex);
用法一：純本地數據傳輸（非異步請求數據）
定義vuex內容
const store = new Vuex.Store({ //定義
state: {
title: " ", //提前定義數據名稱
comingsoon: "",
},
mutations: {
//方法名稱和傳參時定義的名稱一致
kerwinchangetitle(state, payload) { //第一個參數是要存放的位置，第二個參數是傳來的數據
state.title = payload
}
},
})
export default store; //導出
引用store
import Vuex from "vuex"
import store from "./store"
new Vue({
el: '#app',
router,
store,
axios,
components: { App },
template: '<App/>',
render: h => h(App)
})
傳送數據
點擊事件跳轉組件，跳轉之前將數據傳送到vuex內儲存
setStore(name) {
this.$store.commit("kerwinchangetitle", name);
router.push("/");
}
kerwinchagetitle：定義傳送方法名稱
name：將要儲存在vuex內的數據
接收數據
mounted() {
this.title = this.$store.state ? this.$store.state.title : [];
}
this.$store.state.title：vuex內存放的數據名稱，將vuex內的數據請求出並賦值給該組件的this.title
用法二：異步請求數據
import axios from "axios"; //引入axios
state: {
comingsoon: ""
},
actions: {
comingsoonaction: function (store, payload) {
//異步請求
axios.get("").then(res => {
console.log(res.data.data) //請求回來的數據
store.commit('kerwincomingsoon', res.data); //傳給metations中修改
})
}
},
metations: {
kerwincomingsoon: function (state, payload) {
state.comingsoon = payload //修改參數 賦值給comingsoon。
}
}
metations會監控每一筆數據的修改記錄，必須交給metations中修改，否則會報錯
在其他組件獲取數據的操作是相同的
store最終是被渲染成一段js對象 刷新後就沒有了 內存就被釋放了
1.應用層級的狀態應該集中到單個store對象中。
2.提交mutation是更改狀態的唯一方法，並且這個過程是同步的
3.異步邏輯都應該封裝到action裏面
官網推薦工具 谷歌瀏覽器插件 devtools
<----------------------------------------------------學習交流,---------------------------------------------------->