該配置檔案便是 Vuex 的配置檔案，主要有 4 個核心點：state、mutations、actions 及 getter，詳細的介紹大家可以參考官方文件：[核心概念](https://vuex.vuejs.org/zh/guide/state.html)，這裡我用一句話介紹就是：**我們通過 actions 提交 mutations 去 修改 state 的值並通過 getter 獲取**。
需要注意的是不是每一個專案都適合使用 Vuex，如果你的專案是中大型專案，那麼使用 Vuex 來管理錯綜複雜的狀態資料是很有幫助的，而為了後期的拓展性和可維護性，這裡不建議使用 CLI 生成的一份配置檔案來管理所有的狀態操作，我們可以把它拆分為以下目錄： ``` └── store     ├── index.js          # 我們組裝模組並匯出 store 的地方     ├── actions.js        # 根級別的 action     ├── mutations.js      # 根級別的 mutation     └── modules         ├── moduleA.js    # A模組         └── moduleB.js    # B模組 ``` 與單個 store.js 檔案不同的是，我們按模組進行了劃分，每個模組中都可以包含自己 4 個核心功能。比如模組 A 中：

/* moduleA.js */

const moduleA = {
    state: { 
        text: 'hello'
    },
    mutations: {
        addText (state, txt) {
            // 這裡的 `state` 物件是模組的區域性狀態
            state.text += txt
        }
    },
    
    actions: {
        setText ({ commit }) {
            commit('addText', ' world')
        }
    },

    getters: {
        getText (state) {
            return state.text + '!'
        }
    }
}

export default moduleA
 

上方我們匯出 A 模組，並在 index.js 中引入：

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'
import { mutations } from './mutations'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        groups: [1]
    },
    modules: {
        moduleA, // 引入 A 模組
        moduleB, // 引入 B 模組
    },
    actions, // 根級別的 action
    mutations, // 根級別的 mutations
    
    // 根級別的 getters
    getters: {
        getGroups (state) {
            return state.groups
        }
    }   
})
 

這樣專案中狀態的模組劃分就更加清晰，對應模組的狀態我們只需要修改相應模組檔案即可。 那麼下面進入正題

眾所周知 Vuex 是什麼呢？是用來幹嘛的呢？

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

例如：你有幾個資料，幾個操作，在多個元件上都需要使用，如果每個元件都去呼叫都是寫，就會很麻煩，程式碼又臭又長。當然 如果沒有大量的操作和資料需要在多個元件內使用的話呢，其實也就可以不用這個 Vuex了。看個人吧！

這裡我就用自己對 Vuex 的理解來介紹這個東西怎麼去使用，我人也不聰明，整好久才整明白，話不多說，下面開始上程式碼。

1、首先為了專案格式便於維護和相對規範一點，我們先在 目錄下建立一個 store 資料夾，並且在下面建立一個 store.js 檔案：

2、簡單明瞭，先引入 Vue 和 Vuex 並且別忘了 Vue.use(Vuex);

當然你 Vuex 首先得跟 main.js 扯上點關係嘛。這裡的m_index.js === main.js 因為專案原因，暫時換了個名字，不過也無影響，好了我們繼續。

=》引入 store 檔案  =》   並且 Vue 例項上得將 掛載 store ，這下萬無一失。可以繼續了 

 然後我們就可以開始編寫我們的vuex業務程式碼了，那麼，我們的資料如何儲存？

 

3、現在開始 Vuex 的主宰部分 new Vuex.Store（{}）

 在這張圖上可以清楚的看到 new Vuex.Store 裡面有一個 state:{ } 註釋也寫了，

這是你要設定的全域性訪問的 state 物件，也就是你需要 count 就丟個 count進去，需要 price 就丟個 price進去，

這裡我丟了個 count 和 ChangeShowCom 兩個不同的資料型別 作為一個對比。

 

4、如何在頁面中獲取 state 裡面的 資料呢？

通過 this.$store.state.count 可以拿到 state裡面的 count 也就是0，話不多說，看看吧

5、getters  =》getters 和 元件的 computed 類似，方便直接生成一些可以直接用的資料。當組裝的資料要在多個頁面使用時，就可以使用 getters 來做。

　註釋也寫了，getters 可以實時監聽state值的變化(最新狀態)

 我給getters裡面獲取count值的方法命名為 getCount 並且需要傳入 state

那麼如何獲取 通過 getters 獲取 承載變化的 count 的值呢？

this.$store.getters.getCount  具體效果在 第4 欄裡面有些，這裡就不作重複了。

 

6、那麼， 我們如果想改變 count 的值，應該怎麼做呢？ 這時候就可以用到  mutations 。

要修改store中的值唯一的方法就是提交mutation來修改，我們現在Hello World.vue檔案中新增兩個按鈕，一個加1，一個減1；

這裡我們點選按鈕呼叫add（執行加的方法）和del（執行減法的方法），然後在裡面直接提交mutations中的方法修改值：

修改store.js檔案，新增mutations，在mutations中定義兩個函式，用來對count加1和減1，

這裡定義的兩個方法就是上面commit提交的兩個方法如下：

　我們可以將引數傳遞給mutations中的函式進行計算 這裡是 num 。

   現在我們看看效果 ：

  很好，count 數值都發生了改變，我點選了兩下，並且 是可以在 Vue Devtools 中的 Vuex 看到過程效果

payload ：1 就是數值變化1 type 操作的方法是 addCount 也就是 mutations 根方法

ok！完美。

7、到了 Actions 了  

Action 類似於 mutation，不同在於：

• Action 提交的是 mutation，而不是直接變更狀態。
• Action 可以包含任意非同步操作。

我們來看一下：

然後我們去修改Hello World.vue檔案：

這裡我們把commit提交mutations修改為使用dispatch來提交actions；我們點選頁面，效果是一樣的。

現在讓我們來看看效果，這裡我又點選了6下，很顯然，效果是一樣的。

注意，當實際寫專案的時候  裡面未必直接傳的是 數字1 可能是物件啊 或者字串啊。所以這個時候就要注意了，我舉個例子：

這裡寫個 input 輸入框 雙向繫結一個 something 記得在 data 裡面初始化一下，

然後，我們將something 傳入這個方法裡面 add(something) 

這個時候，看著好像沒有什麼問題，那麼問題這時候就來了，我們先試試點加號會發生什麼？

  我點選了三下加號，看到沒，直接在 0後面拼接了111 變成0111 這顯然不是我們想要的效果了，這是為什麼呢？

我們來列印一下 這個 1 的資料型別

原來如此，這個是字串型別，難怪不能直接加，那麼現在我們該怎麼辦呢？當然是 字串轉換成數字啦 parseInt()

當然是 字串轉換成數字啦  哈哈哈哈哈哈 parseInt(); 方法  然後繼續列印結果

  好了，現在就是數字型別了，那麼我們繼續最後一步，並且看看效果吧

 這裡我點選了三下，結果成功的變成了 6.

8、來看一下 Vuex 裡面的好東西，輔助函式 mapState、mapGetters、mapActions

如果我們不喜歡這種在頁面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”這種很長的寫法，

那麼我們可以使用mapState、mapGetters、mapActions就不會這麼麻煩了；

並且我們配合 ... 拓展符 一起使用。