1. 前言

上一篇文章Vuex基礎(chǔ)詳解中已經(jīng)介紹v-cli項(xiàng)目中Vuex的基本使用方法，本期這篇文章主要是教大家如何模塊化的使用Vuex以及輔助函數(shù)mapGetters,mapActions,mapStates, mapMutations的使用。

2. 如何模塊化使用Vuex

上篇文章已經(jīng)介紹到了如何安裝Vuex和基本核心的內(nèi)容已經(jīng)如何使用。這里我們之間開(kāi)始建立模塊化的內(nèi)容。

2.1 目錄結(jié)構(gòu)

1604025280308.jpg

• 一塊是我們根據(jù)不同功能存放不同的數(shù)據(jù)的目錄modules，modules目錄下存放我們不同功能的狀態(tài)管理文件/statics/index.js。

// 引入mutations相關(guān)方法
import * as staticsType from "../../types/statics/mutations";
import {
  // 獲取消息數(shù)量的接口
  getNumber,
  // 通用的接口錯(cuò)誤返回消息處理函數(shù)
  notifyError
} from "@/utils/getData";

// 初始的state方法
const initState = () => ({
  messageNumber: 0,
});

export default {
  // 使用模塊化必須設(shè)置這個(gè)參數(shù)為true
  namespaced: true,
  state: {
    ...initState()
  },
  getters: {
    // 判斷當(dāng)前消息數(shù)量是否為0
    isNoMessage(state) {
      return state.messageNumber === 0;
    }
  },
  mutations: {
    // 設(shè)置消息數(shù)量
    [staticsType.SET_MESSAGE_NUMBER](state, data) {
      state.messageNumber = data;
    },
    // 初始化vuex state
    [staticsType.INIT_STATE](state) {
      const defaultState = initState();
      Object.keys(state).forEach(key => {
        state[key] = defaultState[key];
      });
    }
  },
  actions: {
    getNumber(context, params) {
      // 通過(guò)api接口獲取參數(shù)
      // params為傳入的參數(shù)
      getMessage(params).then(res => {
        context.commit(staticsType.SET_MESSAGE_NUMBER, res.data);
      }).catch(err => {
        notifyError(err);
      });
    }
  }
};  

• 目錄types下存放/statics/mutations相關(guān)方法（用狀態(tài)碼保存，以后如果需要修改方法名可以直接改mutations.js文件即可）。

export const SET_MESSAGE_NUMBER = "setMessageNumber";
export const INIT_STATE = "initState";

2-2. 主文件中引入使用模塊化

各個(gè)模塊搭建完成后，我們需要在store文件夾下引入各個(gè)模塊。改寫(xiě)store文件下的/store/index.js。

import Vue from "vue";
import Vuex, { Store } from "vuex";
import statics from "./modules/statics/index";

Vue.use(Vuex);
const store = new Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  // 通過(guò)modules引入模塊中的文件
  modules: {
    statics
  }
});

export default store;  

3. 在組件中使用

3.1. 輔助函數(shù) mapGetters,mapActions,mapStates,mapMutations。

1. 首先在組件中引入對(duì)應(yīng)的方法
   模塊化的引入這些輔助函數(shù)時(shí)必須還要用到另一個(gè)輔助函數(shù)createNamespacedHelpers，我們能通過(guò)這個(gè)函數(shù)指定我們引入的是哪塊功能下?tīng)顟B(tài)數(shù)據(jù)。

// 引入mutations相關(guān)方法
import * as staticsType from "../store/types/statics/mutations";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions, mapGetters } = createNamespacedHelpers("statics");

2. mapState
mapState需要配合computed一起使用。

computed: {
   ...mapState(["messageNumber"]),
}, 
methods: {
   showMessage() {
      // 這個(gè)時(shí)候直接通過(guò)`this`就可以拿到對(duì)應(yīng)的數(shù)據(jù)
      console.log(this.messageNumber);
   }
}

3. mapGetters
   與mapState使用方法一致。

computed: {
   ...mapGetters(["isNoMessage"]),
}, 
methods: {
   noMessage() {
      console.log(this.isNoMessage === 0);
   }
}

4. mapMutations, mapActions
   這兩個(gè)輔助函數(shù)可以直接放入methods做方法。

methods: {
  ...mapActions(["getNumber"]),
  ...mapMutations({
      initState: staticsType.INIT_STATE
  }),
  // 通過(guò)接口請(qǐng)求消息數(shù)量
  getMessageNumber() {
      // 具體調(diào)用api和設(shè)置數(shù)量都在`vuex`的index.js文件中
      this.getNumber({ param: test });
  },
  // 初始化`state`
  // 因?yàn)槭浅跏蓟瘮?shù)據(jù)，所以就算是同步的`commit`也沒(méi)有關(guān)系，在其他組件中也可以初始化
  setStateInit() {
    this.initState();
  }
}

3-2. 注意點(diǎn)

• 輔助函數(shù)傳入的參數(shù)可以是數(shù)組，也可以是對(duì)象，以下兩種寫(xiě)法效果是一樣的。

..mapMutations({
   initState: staticsType.INIT_STATE
}),
...mapMutations([staticsType.INIT_STATE]),

• 上文中提到的獲取消息數(shù)量的接口和處理錯(cuò)誤的函數(shù)是我使用axios插件封裝的一個(gè)統(tǒng)一的api庫(kù)，如果大家感興趣的話(huà)，后面我也會(huì)專(zhuān)門(mén)做一篇關(guān)于這個(gè)的文章。

最后，喜歡的話(huà)請(qǐng)點(diǎn)個(gè)贊唄????。