曾幾何時(shí)，我采用vue2框架寫了關(guān)于世界杯競(jìng)猜主題的項(xiàng)目，里面有多個(gè)視圖依賴于同一狀態(tài)，然后來(lái)自不同視圖的行為需要變更同一狀態(tài)。
想想以前稍簡(jiǎn)單的多層組件嵌套采用父子傳值的方式搞得我已經(jīng)夠難受（現(xiàn)在回憶起來(lái)氣都不順），現(xiàn)在如果還采用這種方式，可能連我都看不懂自己寫的代碼了，連自己都不知道怎么維護(hù)了！很慶幸，有一種狀態(tài)管理架構(gòu)叫vuex,很慶幸，他能很好的解決我遇到的問(wèn)題......

vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)，用來(lái)管理公用屬性，真的是好用太多了?。?！

那就開始吧!

1、利用npm包管理工具，進(jìn)行安裝 vuex（前提是已經(jīng)用Vue腳手架工具構(gòu)建好項(xiàng)目，可參考http://www.itdecent.cn/p/023b7492833d）

npm install vuex --save

2、新建一個(gè)store.js用于存放公共的屬性

在store.js中引用Vuex

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)

3、在main.js中引用新建的store.js,并在實(shí)例化 Vue對(duì)象時(shí)加入 store 對(duì)象

import store from './store'

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

配置好這些關(guān)聯(lián)文件之后，我們可以開始狀態(tài)管理了~
下面是store.js狀態(tài)管理示例：

const store = new Vuex.Store({
  state: { //唯一數(shù)據(jù)源，我理解為聲明全局變量
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ],
    count:1
  },
  getters: {//針對(duì)state數(shù)據(jù)的過(guò)濾，
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: { //邏輯處理，但Mutation 必須是同步函數(shù)
      increment (state) {
        // 變更狀態(tài)
        state.count++
      }
  }，
  actions: {//Action 類似于 mutation,Action 提交的是 mutation，而不是直接變更狀態(tài);Action 可以包含任意異步操作.
    setIncrement (context) {
      context.commit('increment')
    }
  }
})

狀態(tài)管理邏輯寫好后，就可以在組件頁(yè)面調(diào)用， 假設(shè)我有個(gè)組件的名字叫matchVs.vue,我要調(diào)用公用的方法啦~
首先引用
import { mapState } from "vuex";
然后調(diào)用方法
computed: { ...mapState({ // 獲取count的值，此時(shí)獲取到count的值為2 count: state => state.count }) }, created() { //頁(yè)面創(chuàng)建的時(shí)候，就調(diào)用該方法 this.$store.dispatch("setIncrement "); }
基本就是這么用了，如果你的store比較大，vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

更多更詳細(xì)的，那就去看看文檔吧https://vuex.vuejs.org/zh/