VUEX：狀態管理

  最近在優化項目，發現有很多公用的方法和屬性，所以計劃把這些公用的狀態提取出來，所以選擇VueX，將公用狀態分發給多個組件複用，使得狀態管理更爲清晰，方便項目的維護。

1、目錄結構的設計

- store：目錄名稱
	- index.js：狀態管理實例的創建
	- state.js：公共管理的狀態
	- mutation.js：用於狀態值的修改
	- mutationType.js：mutations的類型設置，使用常量，建議使用大寫
	- actions.js：用於提交mutations

2、action和mutation的區別

mutation有必須同步執行這個限制；
action不受限制，可以執行異步操作；

3、具體實現

【index.js】

import Vue from 'vue';
import Vuex from 'vuex';

import state from './state';
import actions from './actions';
import mutations from './mutations';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions
})

【state.js】

export default {
  company: {}
}

【mutationType.js】

export const GET_COMPANY = 'GET_COMPANY';

【mutation.js】

import * as types from './mutationTypes';

export default {
  [types.GET_COMPANY](state, company) {
    state.company = company;
  }
}

【actions.js】

import * as types from './mutationTypes';
import N from '@/js/libs/network';

export default {
  getCompany: function (context, queryId) {
    N.jsonGet(
      url,
      {
        id: queryId
      },
      {
        success: data => {
          context.commit(types.GET_COMPANY, data);
        },
        fail: XMLHttpRequest => {
          errorHandler(XMLHttpRequest);
        }
      }
    )
  }
} 

  大致的用法就是這個樣子，希望可以幫助到大家。