Vuex 基礎使用

前言 vuex 是 vue 官方出的一個全局的狀態管理模式，能夠理解爲一個 vuex 項目的全局變量吧，再構建大型項目的時候，咱們可能會須要用到它。下面就來學一下怎麼去使用它吧（本文偏向於具體使用，如要深刻學習，請看官方文檔）。

1 安裝

咱們要用啥就要先裝啥，直接 npm install 就好了

npm install vuex

2 文件結構

vuex 的也是 vue 項目中的一個模塊，使用咱們通常會用一個 store 文件夾去存放屬於 vuex 的文件。他通常是有下面這些模塊

2.1 state.js

這個的裏面就放着 vuex 的 state 數據，我的理解這個就是一個一個全局變量庫。

let state = {
    dept: 'TT',
    num: 'S0171',
}

export default state;

2.2 getters.js

除了咱們默認的 state 狀態以外，還會有一些相似組件中的計算屬性的派生的狀態，他定義的時候和定義計算屬性是同樣的，可是要傳入一個 state 做爲參數。

// 使用箭頭函數，簡潔好看
let getters = {
    deptNo: state => state.dept + state.num
}
export default getters;

2.3 mutations.js

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數,而後還能夠傳入一個額外的參數，即載荷（payload），咱們通常可使用這個 payload 傳入一些修改時須要的參數。

此外 vuex 官方是推薦用常量做爲事件類型，使用咱們通常也就按照推薦的來咯，當項目足夠大的時候，咱們還會搞多一個 mutation-type.js 文件來存放這些事件類型，可是如今咱們就先把他們都寫一塊兒了。

// 事件類型
const SET_DEPT = 'SET_DEPT'

const mutation = {
    // 回調函數，就處理 state 的方法啦
    [SET_DEPT](state, payload) {
        state.dept = payload.dept;
    }
}

export default mutation;

2.4 actions.js

因爲 mutation 裏面不支持異步操做，因此當咱們須要在 vuex 裏面執行異步操做的時候,就要用到 action 了，不過要注意 action 只是提供異步操做的機會，可是若是要修改 state 的數據的時候，仍是要用到 mutation 裏面的同步事件。

他的聲明方式和 action 是差很少的

const ASET_DEPT = 'ASET_DEPT'
const actions = {
    [ASET_DEPT](context,payload){
        setTimeout(()=>{
            context.commit('SET_DEPT',payload.dept);
        },2000)
    },
}
export default actions;

2.5 index.js

這個就直接 vuex 的入口文件了，在這邊要建立 store 實例，並將其導出,咱們就要把咱們以前搞的全部都丟到這裏面來，而後建立一個 store 實例。

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

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

Vue.use(Vuex);

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

最後咱們只要在建立 vue 的實例的 main.js 文件裏面導入 store 模塊，並在初始化 vue 實例的時候引進去就成功搭建了一個全局的狀態倉庫了。

3 使用

前面咱們說了這麼去搭這個倉庫，如今咱們已經搭好了，就要知道這麼去使用這個倉庫的數據。

3.1 state 數據的獲取

這個因爲咱們是在根 vue 實例就引入了 store，而後咱們通常是在計算屬性中去拿取 vuex 的狀態

computed :{
    dept(){
        this.$store.state.dept
    }
}

爲了減小咱們的工做量，vuex 還給咱們貼心準備了輔助函數 mapState

// 引入
import { mapState } from "vuex";

computed: {
    ...mapState({
      name: state => state.Deno.name,
      dept: state => state.dept,
    })
    // 當 computed 裏面的計算屬性的名稱和 state 裏面名稱同樣時，還能夠這麼寫
    ...mapState([
      'name','dept'
    ])
  },

3.2 getter 的獲取

這個和 state 差很少，直接發代碼了

computed: {
    deptNo() {
      return this.$store.getters.deptNo;
    },
}

而後他也有一個輔助函數 mapGetters。用法就

computed: {
    ...mapGetters({
      deptNo: 'deptNo',
    })
    // 當 computed 裏面的計算屬性的名稱和 state 裏面名稱同樣時，還能夠這麼寫
    ...mapState([
      'deptNo'
    ])
  },

3.3 mutation 的使用

mutation 是事件，也就是方法啦，因此咱們用方法的形式去使用它。咱們能夠直接使用

this.$store.commit('SET_DEPT', {
  dept: 'QQ'
})

也能夠用輔助函數 mapMutations 映射爲本地方法

...mapMutations(["SET_DEPT"]),
...mapMutations({
    setDept: "SET_DEPT"
}),

而後直接調用

this.SET_DEPT('QQ');
this.setDept('QQ');

3.4 action 的使用

action 也是方法啦，因此他的使用和 mutation 是差很少的。

this.$store.dispatch('ASET_DEPT',{dept:'QQ'})

它的輔助函數是 mapActions，用它映射爲本地方法。

...mapActions({
  aSetDept: 'ASET_DEPT',
}),
...mapActions([
  'ASET_DEPT'
])

關於 vuex 的簡單使用就說明到這邊了，可是因爲有時候咱們的項目是很是大，使用單一的一個 state 來存數據可能會致使數據太多，太雜，因此 vuex 還有一個 module 的機制，你們能夠去官網看文檔或者看個人下一篇文章。文章就寫到這裏啦，若是你們發現我哪邊寫錯的話，還望指出勘誤，期待與你們一塊兒學習進步。