Vuex 入門

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

自制vuex LOGO

相信很多新選手看完這段話有種絕望的感覺。開始我也是這樣的，後來我想到了一個比方！

比如某年級有5個小班，每個小班有25個同學，但是隻有一個老師授課，假如5個小班就對應著5個元件，每個班的25個同學就相當於每個元件中的25條資料，這個老師就相當於 vuex ，老師講的課就相當於每一條資料。要保證每個同學受到同樣的教育，就需要這個老師把每節課分別講5遍，還不能保證每個班的同學聽到的效果相同。一段時間後，老師覺得這樣特別麻煩還很累，就想了一個辦法，找了一個大教室，把這5個小班的同學合併到一起，這樣每個課程只需要講一次就好啦，而且還保證了每個班的同學聽到的效果相同。這就是 vuex 的作用，把各個元件中用到的資料統一管理，同步發放，省時省心省力。

那這個 vuex 怎麼用呢？讓我們從一個簡單的 Vue 計數應用開始

一、基本用法

1. 初始化並建立一個專案

vue init webpack-simple vuex-demo
cd vuex-demo
npm install

2. 安裝 vuex

npm install vuex -S

3. 在 src 目錄下建立 store.js 檔案，並在 main.js 檔案中匯入並配置

store.js 中寫入

import Vue from 'vue'//引入 vuex 並 useimport Vuex from 'vuex'Vue.use(Vuex)

main.js 檔案

import Vue from 'vue'import App from './App.vue'import store from './assets/store' //匯入 store 物件new Vue({  //配置 store 選項，指定為 store 物件，會自動將 store 物件注入到所有子元件中，在子元件中透過 this.$store 訪問該 store 物件 
  store, 
  el: '#app',  render: h => h(App)
})

4. 編輯 store.js 檔案

在應用 vuex 之前，我們還是需要看懂這個流程圖，其實很簡單。

vuex

① Vue Components 是我們的 vue 元件，元件會觸發（dispatch）一些事件或動作( Actions);
② 我們在元件中發出的動作，肯定是想獲取或者改變資料的，但是在 vuex 中，資料是集中管理的，我們不能直接去更改資料，所以會把這個動作提交（Commit）到 Mutations 中；
③ 然後 Mutations 就去改變（Mutate）State 中的資料；
④ 當 State 中的資料被改變之後，就會重新渲染（Render）到 Vue Components  (元件)中去， Vue Components (元件)展示更新後的資料，完成一個流程。

Vuex 的 是 Store（倉庫），相當於是一個容器，一個 Store 例項中包含以下屬性的方法：

state     定義屬性（狀態 、資料）
getters  用來獲取屬性
actions  定義方法（動作）
commit  提交變化，修改資料的唯一方式就是顯示的提交 mutations
mutations  定義變化，處理狀態（資料）的改變
mapGetters  用來獲取屬性（資料）
mapActions  用來獲取方法（動作）

store.js 中寫入

// 定義屬性（資料）var state = {    count:6}// 建立 store 物件const store = new Vuex.Store({
    state
})// 匯出 store 物件export default store;

方式1、 在 app.vue 中就能透過 this.$store 訪問該 store 物件 ，獲取該 count 。

其中需要注意的是 this.$store 中的 store 與 main.js 中配置的 store 相對應，一定要注意大小寫

export default {  name: 'app',  computed:{
    count(){      //返回獲取到的資料
      return this.$store.state.count
    }
  }
}

執行

npm run dev

就能在頁面中看到傳過來的資料了

方式2、vuex 提供的 mapGetters 和 mapActions 來訪問

mapGetters    用來獲取屬性（資料）

① 在 app.vue 中引入 mapGetters

import {mapGetters} from 'vuex'

② 在 app.vue 檔案的計算屬性中呼叫  mapGetters 輔助方法，並傳入一個陣列，在陣列中指定要獲取的屬性  count

import {mapGetters,mapActions} from 'vuex'export default {  name: 'app',  computed:mapGetters([    //此處的 count 與以下 store.js 檔案中 getters 內的 count 相對應
    'count'
  ])
}

③ 在 store.js 中定義 getters 方法並匯出

getters 用來獲取屬性

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 定義屬性（資料）var state = {    count:6}// 定義 gettersvar getters={    //需要傳個形參，用來獲取 state 屬性
    count(state){        return state.count
    }
}// 建立 store 物件const store = new Vuex.Store({
    state,
    getters
})// 匯出 store 物件export default store;

這樣頁面上就會顯示傳過來的資料了！接下來我們來透過動作改變獲取到的資料

④在 store.js 中定義 actions 和 mutations 方法並匯出

actions 定義方法（動作）
commit 提交變化，修改資料的唯一方式就是顯示的提交 mutations
mutations 定義變化，處理狀態（資料）的改變

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 定義屬性（資料）var state = {    count:6}// 定義 gettersvar getters={
    count(state){        return state.count
    }
}// 定義 actions ，要執行的動作，如流程的判斷、非同步請求const actions ={    // ({commit,state}) 這種寫法是 es6 中的物件解構
    increment({commit,state}){        //提交一個名為 increment 的變化，名字可自定義，可以認為是型別名，與下方 mutations 中的 increment 對應
        //commit 提交變化，修改資料的唯一方式就是顯式的提交 mutations
        commit('increment') 
    }
}// 定義 mutations ，處理狀態（資料） 的改變const mutations ={    //與上方 commit 中的 ‘increment’ 相對應
    increment(state){
        state.count ++;
    }
}// 建立 store 物件const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})// 匯出 store 物件export default store;

⑤ 在 app.vue 中引入 mapActions ，並呼叫

mapActions      用來獲取方法（動作）

import {mapGetters,mapActions} from 'vuex'

呼叫 mapActions 輔助方法，並傳入一個陣列，在陣列中指定要獲取的方法 increment

import {mapGetters,mapActions} from 'vuex'export default {  name: 'app',  computed:mapGetters([    'count'
  ]),  methods:mapActions([    //該 increment 來自 store.js 中匯出的 actions 和 mutations 中的 increment 
    'increment',
  ])
}

這樣就能透過 button 來改變獲取到的 count 了。

現在你可以透過 storel.state 來獲取狀態物件，以及透過 store.commit 方法觸發狀態變更

注意：我們透過提交 mutation 的方式，而非直接改變 store.state.count ，是因為我們想更明確地追蹤到狀態的變化。

這是透過點選事件讓 count++ ，不妨自己試著寫一下 count-- 吧！

看起來確實是挺繞的，需要在理解了原理的情況下，再細細琢磨，加深理解。