如何优雅的使用Vuex

1. 前言

上一篇文章Vuex基础详解中已经介绍v-cli项目中Vuex的基本使用方法，本期这篇文章主要是教大家如何模块化的使用Vuex以及辅助函数mapGetters,mapActions,mapStates, mapMutations的使用。

2. 如何模块化使用Vuex

上篇文章已经介绍到了如何安装Vuex和基本核心的内容已经如何使用。这里我们之间开始建立模块化的内容。

2.1 目录结构

1604025280308.jpg

注:这里目录结构分2块。

• 一块是我们根据不同功能存放不同的数据的目录modules，modules目录下存放我们不同功能的状态管理文件/statics/index.js。

// 引入mutations相关方法
import * as staticsType from "../../types/statics/mutations";
import {
  // 获取消息数量的接口
  getNumber,
  // 通用的接口错误返回消息处理函数
  notifyError
} from "@/utils/getData";

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

export default {
  // 使用模块化必须设置这个参数为true
  namespaced: true,
  state: {
    ...initState()
  },
  getters: {
    // 判断当前消息数量是否为0
    isNoMessage(state) {
      return state.messageNumber === 0;
    }
  },
  mutations: {
    // 设置消息数量
    [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) {
      // 通过api接口获取参数
      // params为传入的参数
      getMessage(params).then(res => {
        context.commit(staticsType.SET_MESSAGE_NUMBER, res.data);
      }).catch(err => {
        notifyError(err);
      });
    }
  }
};  

• 目录types下存放/statics/mutations相关方法（用状态码保存，以后如果需要修改方法名可以直接改mutations.js文件即可）。

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

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

各个模块搭建完成后，我们需要在store文件夹下引入各个模块。改写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: {},
  // 通过modules引入模块中的文件
  modules: {
    statics
  }
});

export default store;  

3. 在组件中使用

3.1. 辅助函数 mapGetters,mapActions,mapStates,mapMutations。

1. 首先在组件中引入对应的方法
   模块化的引入这些辅助函数时必须还要用到另一个辅助函数createNamespacedHelpers，我们能通过这个函数指定我们引入的是哪块功能下状态数据。

// 引入mutations相关方法
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() {
      // 这个时候直接通过`this`就可以拿到对应的数据
      console.log(this.messageNumber);
   }
}

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

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

4. mapMutations, mapActions
   这两个辅助函数可以直接放入methods做方法。

methods: {
  ...mapActions(["getNumber"]),
  ...mapMutations({
      initState: staticsType.INIT_STATE
  }),
  // 通过接口请求消息数量
  getMessageNumber() {
      // 具体调用api和设置数量都在`vuex`的index.js文件中
      this.getNumber({ param: test });
  },
  // 初始化`state`
  // 因为是初始化数据，所以就算是同步的`commit`也没有关系，在其他组件中也可以初始化
  setStateInit() {
    this.initState();
  }
}

3-2. 注意点

• 辅助函数传入的参数可以是数组，也可以是对象，以下两种写法效果是一样的。

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

• 上文中提到的获取消息数量的接口和处理错误的函数是我使用axios插件封装的一个统一的api库，如果大家感兴趣的话，后面我也会专门做一篇关于这个的文章。

最后，喜欢的话请点个赞呗❤️❤️。