这篇文章主要介绍了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
const state = { name: "cart", count: 0 } const mutations = { setOrderName(state, name) { state.name = name }, setOrderCount(state, count) { state.count = count } } const actions = { } const getters = { } export default { state, mutations, actions, getters }
Vue 引入
import Vue from 'vue' import App from './App' import store from './store' Vue.config.productionTip = false Vue.prototype.$store = store // 注入仓库 const app = new Vue({ store// 注入仓库 }) app.$m<i style="color:transparent">本文来源gaodai$ma#com搞$代*码6网</i>ount()
index.vue
<button class="primary">setUserName</button><button class="primary">setUserAge</button><button class="primary">setOrderName</button><button class="primary">setHasLogin</button><button class="primary">setToken</button> {{userName}} {{userAge}}{{orderName}}{{hasLogin}}{{token}}
以上就是Vuex modules模式下mapState/mapMutations的操作实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vuex modules模式下mapState/mapMutations的操作实例
转载请注明原文链接：Vuex modules模式下mapState/mapMutations的操作实例
