Vuex 模块化通过方法调用的实践方案

说明

对于Vuex的模块化，官方没有给出通过方法调用Getter、Mutation、Action的方式。下面通过几个简单的例子来介绍Vuex模块化在生产实践中的使用。

文件目录

• store
  • index.js
  • modules
    • moduleA.js

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

import moduleA from "./modules/moduleA";
Vue.use(Vuex);
const store = new Vuex.Store({
  modules: {
    moduleA
  }
});
export default store;

// state
const state = {
  todoList: [{
    title: '健身',
    emergency: 1,
  }, {
    title: '吃海底捞',
    emergency: 4,
  }, {
    title: '抽卡',
    emergency: 4
  }]
};
// getters
const getters = {
  // 带参Getter
  getEmergencyList: (state) => (emergency) => {
    return state.todoList.filter(val => val.emergency === emergency)
  }
};
// mutations
const mutations = {
  // 带参Mutation
  setTodoList(state, payload) {
    state.todoList = payload.todoList;
  }
};
// actions
const actions = {};
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

Getter模块化使用

非模块情况下Getter通过方法调用

this.$store.getters.getEmergencyList(4)

模块化情况下Getter通过方法调用

this.$store.getters[‘moduleA/getEmergencyList’](4)

通过控制台打印此时的Getter对象，我们发现是带有’moduleA/getEmergencyList’函数的空对象，所以我们直接通过对象属性访问运算符（.）是无法访问的，需要通过中括号访问对应的方法名。

Mutation模块化使用

非模块情况下Getter通过方法调用

const todoList = [{title: ‘睡觉’,emergency: 1}]
this.$store.commit(‘setTodoList’,todoList)

模块化情况下Getter通过方法调用

const todoList = [{title: ‘睡觉’,emergency: 1}]
this.$store.commit(‘moduleA/setTodoList’,todoList)

同样的，需要加类似路径的参数