极乐门资源网 Design By www.ioogu.com
当我们使用 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
<template> <view> <button class="primary" @click="setUserName('big_cat')">setUserName</button> <button class="primary" @click="setUserAge(27)">setUserAge</button> <button class="primary" @click="setOrderName('yes')">setOrderName</button> <button class="primary" @click="setHasLogin(true)">setHasLogin</button> <button class="primary" @click="setToken('tokentokentokentoken')">setToken</button> <view class=""> {{userName}} </view> <view>{{userAge}}</view> <view>{{orderName}}</view> <view>{{hasLogin}}</view> <view>{{token}}</view> </view> </template> <script> import { mapState, mapMutations } from "vuex" export default { data() { return {} }, computed: { // 原生 hasLogin() { return this.$store.state.hasLogin }, token() { return this.$store.state.token } // 仓库root属性 可以直接 magic 赋值 // ...mapState(["hasLogin", "token"]), // 因为 modules 下的属性使用了命名空间 所以不能使用数组方式的 magic ...mapState({ userName: state => state.user.name, userAge: state => state.user.age, orderName: state => state.order.name }), // 更多示例 ...mapState({ hasLogin(state) { return state.hasLogin }, token(state) { return state.token } }), ...mapState({ hasLogin: (state) => { return state.hasLogin }, token: (state) => { return state.token } }), }, methods: { // vuex 在使用了 modules 模式时 // mutation依然没有命名空间的概念 所以在定义 mutations 时要注意全局的唯一性 // 否则后者会覆盖前者 ...mapMutations(["setHasLogin", "setToken"]), // magic style1 ...mapMutations(["setUserName", "setUserAge", "setOrderName"]), // magic style2 ...mapMutations({ setUserName(commit, userName) { commit("setUserName", userName) }, setUserAge(commit, userAge) { commit("setUserAge", userAge) }, setOrderName(commit, orderName) { commit("setOrderName", orderName) } }), // 原生写法 setUserName(userName) { this.$store.commit("setUserName", userName) }, setUserAge(userAge) { this.$store.commit("setUserAge", userAge) }, setOrderName(orderName) { this.$store.commit("setOrderName", orderName) } } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无Vuex modules模式下mapState/mapMutations的操作实例的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]