当前位置：首页 > news >正文

Vue：Vuex模块化编码（非常实用）

news 2025/6/27 22:45:56

一、情景说明

通过前面的学习，我们知道，Vuex的核心文件就是indexc.js
这个文件里面，主要是四个对象
actions、mutations、state、getters

那么，随着业务的复杂化，所有的逻辑都写在一个actions里面吗？
显然不是。

这次就来学习下如何实现Vuex的模块化编码
根据业务情况，进行划分
这样的好处显而易见！

二、案例

编码思想大概是这样的
我们根据业务情况，对Vuex的配置进行划分模块
然后，将相应的业务配置独立到一个js文件中，并命名成相关业务名称
再在index.js文件中，进行import导入这些独立出来的js业务配置文件
在通过modules关键字，进行引用即可。

count.js文件，求和相关的配置
关键配置：namespaced:true

//求和相关配置
export default {namespaced:true,actions:{jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}},mutations:{JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value}},state:{sum:0, //当前的和school:'中国',subject:'Vue',},getters:{bigSum(state){return state.sum*10}},
}

person.js文件，人员列表相关的配置
关键配置：namespaced:true

import axios from 'axios'
//人员管理相关配置
export default {namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf('王') === 0){context.commit('ADD_PERSON',value)}else{alert('添加的人必须姓王！')}},addPersonServer(context){axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(response => {context.commit('ADD_PERSON',{id:nanoid(),name:response.data})},error => {alert(error.message)})}},mutations:{ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}},state:{personList:[{id:'001',name:'张三'}]},getters:{firstPersonName(state){return state.personList[0].name}},
}

index.js中引入count.js和person.js文件
关键配置：modules

//该文件用于创建vuex中最为核心的store//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'import countOptions from './count'
import personOptions from './person'Vue.use(Vuex);//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
});

vc组件中使用配置
1、常规写法
关键编码：
带上personAbout
this.$store.state.personAbout.personList
this.$store.commit('personAbout/ADD_PERSON',personObj)

        computed:{personList(){return this.$store.state.personAbout.personList},sum(){return this.$store.state.countAbout.sum},firstPersonName(){return this.$store.getters['personAbout/firstPersonName']}},methods: {add(){const personObj = {id:nanoid(),name:this.name}this.$store.commit('personAbout/ADD_PERSON',personObj)this.name = ''},addWang(){const personObj = {id:nanoid(),name:this.name}this.$store.dispatch('personAbout/addPersonWang',personObj)this.name = ''},addPersonServer(){this.$store.dispatch('personAbout/addPersonServer')}},

2、实用mapXxx写法

		computed:{//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState('countAbout',['sum','school','subject']),...mapState('personAbout',['personList']),//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）...mapGetters('countAbout',['bigSum'])},methods: {//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})},