在前端開發過程中，狀態的管理是一件很令人頭疼的事情。尤其是在專案中，涉及同一狀態的元件越多，在元件狀態管理上，通過父子元件之間通訊來更新狀態將變的複雜。Vue專案開發過程中，藉助vuex進行狀態管理將極大的減輕我們在開發過程中對於元件狀態的維護。

vuex:

vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。

你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation

那麼如何合理的將vuex引入我們的專案當中？大致可分為以下幾個步驟：

1. 新建vuex狀態管理資料夾於src/ 下

2. store/index.js 中引入vuex

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            state.count += 1;
        },
        reduce(state) {
            state.count -= 1;
        }
    }
})

export default store;
 

3. 在專案入口檔案 main.js 中引入vuex 

import Vue from 'vue'
import Layout from './layout'
import router from './router'

Vue.config.productionTip = false
// 引入vuex
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { Layout },
  template: '<Layout/>'
})
 

至此，在我們的專案開發過程中，我們可以在 store.js方便地管理我們專案元件中的狀態了。關於如何來合理使用vuex 博主將在接下來的博文中，進行更加清晰的敘述。