Vue Vuex模块化编码

正常写vuex的index的时候如果数据太多很麻烦，如有的模块是管理用户信息或修改课程等这两个是不同一个种类的，如果代码太多会造成混乱，这时候可以使用模块化管理

原始写法

如果功能模块太多很乱

import Vue from 'vue'
import Vuex from 'vuex'
//导入VuexVue.use(Vuex)const actions = {addSum(context, value) {//context 上下文里面有commit函数 value 是组件传过来的值context.commit('AddSum', value)//获取到了数据 操作数据},//获取数据 如发起请求等
}const mutations = {AddSum(state, value) {state.sum += value//这样就完成了赋值}//操作数据
}const state = { sum: 0 }
//保存数据//暴露出去给别人使用
export default new Vuex.Store({actions, mutations, state})

---

模块化写法

如果代码逻辑特别多可以分文件细化

import Vue from "vue";
import Vuex from 'vuex'
Vue.use(Vuex)//用户信息模块
const userList =
{namespaced: true,//开启命名空间  true开启才可以怎样获取数据   ...mapState('classList',['方法名','方法名'])actions: {},  //获取数据 如发起请求等mutations:{getUserId(state, value) {state.user_id = value} //获取用户ID},  //操作数据state: { user_id: '' },// //保存数据getters: {}//计算}//班级模块
const classList =
{namespaced: true,//开启命名空间  true开启才可以怎样获取数据   ...mapState('classList',['方法名','方法名'])actions: {},  //获取数据 如发起请求等mutations: {},  //操作数据state: { class_id: '' },// //保存数据getters: {}//计算}export default new Vuex.Store({modules: { userMsg: userList, classMsg: classList }//获取userList需要从userMsg获取
})

import { mapState,mapMutations,mapActions } from 'vuex';

写入数据

 <button @click="getUserId('dpc520')">加</button><!--使用map必须使用这种方法传值-->

 ...mapMutations('userMsg',['getUserId'])

读取数据

<h1>{{ user_id }}</h1>

computed: {...mapState('userMsg', ['user_id'])//第一个参数表示从vuex里的userMsg对象获取state的user_id值}

---

模块化原始方法 commit getters

commit

模块化使用原始方法赋值需要这样写

   <button @click="test()">原始赋值</button>

区别终于 / 号

 test() {
this.$store.commit('userMsg/getUserId', '123')}

getters

this.$store.getters['xxx/xxx']