1. 建立项目基础公共状态
[src/store/common/common.js]
export default {
namespaced: true, // 命名空间
state: { // 数据存放
clientId: 'c1', // 客户端ID
clientSecret: 'vY9W55NuXM9hoDlx', // 客户端对称秘钥
username: sessionStorage.getItem('username'), // 用户名
userId: sessionStorage.getItem('userId'), // 用户ID
accessToken: sessionStorage.getItem('accessToken'), // 访问Token
refreshToken: sessionStorage.getItem('refreshToken') // 刷新Token
},
getters: { // 过滤器
},
mutations: { // 用于事件触发
setState (state, payload) {
state[payload.name] = payload.val
}
},
actions: { // 用于触发事件, 执行异步操作触发mutations, 去更新state
}
}
2. 把[Vuex模块]: common模块 --> 引入到根store的[Vuex]里
[src/store/index.js]
import Vue from 'vue'
import Vuex from 'vuex'
// 引入Vuex模块
import common from '@/store/common/common' // 引入
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
common //接取
}
})
3. 从[Vuex模块]中取到自己需要的数据, 放在组件里
<template>
<div class="vuexTest">
vuex 模块化
<button @click="getSetStateFun">改变数值</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
name: 'VuexTest', // 组件名称
methods: {
...mapMutations('common', {
getSetState: 'setState'
}),
getSetStateFun () {
this.getSetState({
name: 'clientId',
val: 123 // 此时的 clientId, 已经变成123
})
console.log(this.$store.state.common.clientId)
}
}
}
</script>