Vuex modules模式下mapState/mapMutations的操作实例
时间：2022-03-05 09:51:36|栏目：vue|点击： 次
当我们使用 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>
上一篇：vue轻松实现虚拟滚动的示例代码
栏 目：vue
下一篇：详解vuex之store拆分即多模块状态管理(modules)篇
本文标题：Vuex modules模式下mapState/mapMutations的操作实例
本文地址：http://www.codeinn.net/misctech/195331.html
