關於vuex

官網的話：
　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

　　在我看來vuex就是把須要共享的變量所有存儲在一個對象裏面，而後將這個對象放在頂層組件中供其餘組件使用。換種說法，將vue想做是一個js文件、組件是函數，那麼vuex就是一個全局變量，只是這個「全局變量」包含了一些特定的規則而已。
　　在vue的組件開發中，常常會遇到須要將當前組件的狀態傳遞給其餘組件。父子間通訊時，咱們會採用props + emit 這種方式，但當通訊雙方不是父子組件甚至壓根不存在相關聯繫，或者一個狀態須要共享給多個組件時，就會很是麻煩，數據也會難維護，這對開發不友好。vuex這個時候就很實用，不過在使用vuex以後也帶來了更多的概念和框架。

 1 const store = new Vuex.Store({
 2     state: {
 3         name: 'wangjk',
 4         age: 22
 5     },
 6     getters: {
 7         personInfo(state) {
 8             return `My name is ${state.name}, I am ${state.age}`;
 9         }
10     }
11     mutations: {
12         SET_AGE(state, age) {
13             commit(age, age);
14         }
15     },
16     actions: {
17         nameAsyn({commit}) {
18             setTimeout(() => {
19                 commit('SET_AGE', 18);
20             }, 1000);
21         }
22     },
23     modules: {
24         a: modulesA
25     }
26 }

 

上面的就是一份最基本也是最完整的vuex代碼；vuex包含有五個基本的對象：
（1）state : 存儲狀態，也就是變量；
（2）getters : 派生狀態，也就是set 、get 中的get , 有兩個可選的參數 ： state 、getters分別能夠獲取state中的變量和其餘的getters。外部調用方式：store.getters.personInfo()。就和vue的computed差很少；
（3）mutations : 提交狀態修改。也就是set、get中的set，這是vuex中惟一修改state的方式。但不支持異步操做。第一個參數默認是state。外部調用方式：store.commit('SET_AGE',18)。和vue中的methods相似。
（4）actions : 和mutations相似。不過actions支持異步操做。第一個參數默認是和store具備相同參數屬性的對象。外部調用方式：store.dispatch('nameAsyn')。
（5）mudules : store的子模塊，內容就至關因而store的一個實例。調用方式和前面介紹的類似，只是要加上當前子模塊名，如：store.a.getters.xxx()。

vue-cli中使用vuex的方式

通常來說，咱們都會採用vue-cli來進行實際的開發，在vue-cli中，開發和調用方式稍微不一樣。

 1 ├── index.html
 2 ├── main.js
 3 ├── components
 4 └── store
 5 ├── index.js # 咱們組裝模塊並導出 store 的地方
 6 ├── state.js # 跟級別的 state
 7 ├── getters.js # 跟級別的 getter
 8 ├── const.js # 根級別的mutations名稱（官方推薦mutions方法名使用大寫）
 9 ├── mutations.js # 根級別的 mutation
10 ├── actions.js # 根級別的 action
11 └── modules
12 ├── m1.js # 模塊1
13 └── m2.js # 模塊2

下面爲示例：

state.js

1 const state = {
2     name : 'yuandd',
3     age : 23    
4 } 
5 
6 export default state;

getter.js（咱們通常使用getters來獲取state的狀態，而不是直接使用state）

 1 export const name = (state) => {
 2     return state.name;
 3 }
 4 
 5 export const age = (state) =>{
 6     return state.age;
 7 }
 8 
 9 export const other = (state) =>{
10     return 'My name is ${state.name}, I am ${state.age}'
11 }

const.js（咱們會將全部mutations的函數名放在這個文件裏）

1 const SET_NAME = 'SET_NAME';
2 const SET_AGE = 'SET_AGE';
3 
4 export {
5     SET_NAME,
6     SET_AGE
7 }

mutations.js

 1 import const SET_NAME = 'SET_NAME';
 2 
 3 export default {
 4     [types.SET_NAME](state,name){
 5         state.name = name;
 6     },
 7     [types.SET_AGE](state,age){
 8         state.age = age;
 9     }
10 }

actions.js

 1 import {
 2     SET_NAME,
 3     SET_AGE,
 4 }  from "./const"
 5 
 6 export default {
 7     nameAsyn({commit}, {age, name}) {
 8         commit(types.SET_NAME, name);
 9         commit(types.SET_AGE, age);
10     }
11 };

index.js

1 import state from "./state";
2 import actions from "./actions";
3 import mutations from "./mutations";
4 
5 export default {
6     state,
7     actions,
8     mutations
9 }

 

最後將store實例掛載到main.js裏面的vue上去就行了；

1 import Router from "./router";
2 import store from './store';
3 
4 new Vue({
5   Router,
6   store,
7   render: h => h(App)
8 }).$mount('#app')

 

在vue組件中使用時，咱們一般會使用mapGetters、mapActions、mapMutations，而後就能夠按照vue調用methods和computed的方式去調用這些變量或函數，示例以下：

 1 import {mapGetters, mapMutations, mapActions} from 'vuex';
 2 
 3 /* 只寫組件中的script部分 */
 4 export default {
 5     computed: {
 6         ...mapGetters([
 7             'name',
 8             'age'
 9         ])
10     },
11     methods: {
12         ...mapMutations({
13             setName: 'SET_NAME',
14             setAge: 'SET_AGE'
15         }),
16         ...mapActions([
17             nameAsyn
18         ])
19     }
20 };

   以上就是我對vuex的理解。