宁波市北仑区建设局网站,洛阳seo,沈阳网站制作的公司哪家好,upupw搭建wordpress正常写vuex的index的时候如果数据太多很麻烦#xff0c;如有的模块是管理用户信息或修改课程等这两个是不同一个种类的#xff0c;如果代码太多会造成混乱#xff0c;这时候可以使用模块化管理 原始写法
如果功能模块太多很乱
import Vue from vue
import Vuex from 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 clickgetUserId(dpc520)加/button!--使用map必须使用这种方法传值--...mapMutations(userMsg,[getUserId])读取数据
h1{{ user_id }}/h1computed: {...mapState(userMsg, [user_id])//第一个参数表示从vuex里的userMsg对象获取state的user_id值}模块化原始方法 commit getters
commit 模块化使用原始方法赋值需要这样写 button clicktest()原始赋值/button区别终于 / 号 test() {
this.$store.commit(userMsg/getUserId, 123)}getters
this.$store.getters[xxx/xxx]
