大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了Vuex modules模式下mapState/mapMutations的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联:公司2013年成立为各行业开拓出企业自己的“网站建设”服务,为近1000家公司企业提供了专业的网站设计、成都网站建设、网页设计和网站推广服务, 按需定制制作由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。
当我们使用 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.$mount()
index.vue
{{userName}} {{userAge}} {{orderName}} {{hasLogin}} {{token}}
感谢你能够认真阅读完这篇文章,希望小编分享的“Vuex modules模式下mapState/mapMutations的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!