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)

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值