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.$mount()
index.vue