正常写vuex的index的时候如果数据太多很麻烦，如有的模块是管理用户信息或修改课程等这两个是不同一个种类的，如果代码太多会造成混乱，这时候可以使用模块化管理
原始写法
如果功能模块太多很乱
import Vue from 'vue' import Vuex from 'vuex' //导入Vuex Vue.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']
