Vuex modules模式下mapState/mapMutations的操作实例
版权申诉
104 浏览量
2020-12-13
12:56:01
上传
评论
收藏 37KB PDF 举报
Vuex modules模式下模式下mapState/mapMutations的操作实例的操作实例
当我们使用 Vuex 实现全局状态维护时，可能需要将状态值划分多个模块，比如一些 root 级的用户登录状态，token，用户级
的用户信息，购物车级的购物车信息。
下面我们实例演示下如何在多模块下使用 mapState/mapMutations。
modules 只作用于属性，属性会归属在相应的模块名的命名空间下。
mutations, actions, getter 没有命名空间的限定，所以要保证全局的唯一性，否则后者会覆盖前者
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'
import order from './order'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user,
order
},
state: {
hasLogin: false,
token: ""
},
mutations: {
setHasLogin(state, hasLogin) {
state.hasLogin = hasLogin
},
setToken(state, token) {
state.token = token
}
}
})
export default store
store/user.js
const state = {
name: "sqrtcat",
age: 25
}
const mutations = {
setUserName(state, name) {
state.name = name
},
setUserAge(state, age) {
state.age = age
}
}
const actions = {
}
const getters = {
}
export default {
state,
mutations,
actions,
getters
}
store/order.js
资源评论
weixin_38724154
- 粉丝: 7
- 资源: 895
最新资源
- Screenshot_20240528_103010.jpg
- 基于Python的新能源承载力计算及界面设计源码 - HAINING-DG
- 基于Java的本科探索学习项目设计源码 - 本科探索
- 基于Javascript和Python的微商城项目设计源码 - MicroMall
- 基于Java的网上订餐系统设计源码 - online ordering system
- 基于Javascript的超级美眉网络资源管理应用模块设计源码
- 基于Typescript和PHP的编程知识储备库设计源码 - study-php
- Screenshot_2024-05-28-11-40-58-177_com.tencent.mm.jpg
- 基于Dart的Flutter小提琴调音器APP设计源码 - violinhelper
- 基于JavaScript和CSS的随寻订购网页设计源码 - web-order
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
