When we use Vuex to achieve global state maintenance, we may need to divide the status values into multiple modules, such as some root-level user login status, token, user-level user information, and shopping cart-level shopping cart information.
Below we demonstrate how to use mapState/mapMutations under multiple modules.
- modules only act on attributes, and attributes will belong to the namespace of the corresponding module name.
- mutations, actions, getter There is no namespace limitation, so global uniqueness must be guaranteed, otherwise the latter will override the former
store/
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'
import order from './order'
(Vuex)
const store = new ({
modules: {
user,
order
},
state: {
hasLogin: false,
token: ""
},
mutations: {
setHasLogin(state, hasLogin) {
= hasLogin
},
setToken(state, token) {
= token
}
}
})
export default store
store/
const state = {
name: "sqrtcat",
age: 25
}
const mutations = {
setUserName(state, name) {
= name
},
setUserAge(state, age) {
= age
}
}
const actions = {
}
const getters = {
}
export default {
state,
mutations,
actions,
getters
}
store/
const state = {
name: "cart",
count: 0
}
const mutations = {
setOrderName(state, name) {
= name
},
setOrderCount(state, count) {
= count
}
}
const actions = {
}
const getters = {
}
export default {
state,
mutations,
actions,
getters
}
Vue introduction
import Vue from 'vue'
import App from './App'
import store from './store'
= false
.$store = store // Inject into the warehouse
const app = new Vue({
store// Inject into the warehouse})
app.$mount()
<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: {
// Native hasLogin() {
return this.$
},
token() {
return this.$
}
// The root property of the repository can be directly assigned magic // ...mapState(["hasLogin", "token"]),
// Because the attributes under modules use namespace, the array method cannot be used ...mapState({
userName: state => ,
userAge: state => ,
orderName: state =>
}),
// More examples ...mapState({
hasLogin(state) {
return
},
token(state) {
return
}
}),
...mapState({
hasLogin: (state) => {
return
},
token: (state) => {
return
}
}),
},
methods: {
// vuex when using modules mode // Mutation still has no concept of namespace, so when defining mutations, you should pay attention to the global uniqueness // Otherwise the latter will overwrite the former ...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)
}
}),
// Native writing setUserName(userName) {
this.$("setUserName", userName)
},
setUserAge(userAge) {
this.$("setUserAge", userAge)
},
setOrderName(orderName) {
this.$("setOrderName", orderName)
}
}
}
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.