1、修改store.js
- 在src文件夹中添加store文件夹
- store.js放入store文件夹中,重命名store.js为index.js
- 在store文件夹中添加modules文件夹,来存储我们的模块js
2、使用vuex-persistedstate状态持久化
npm i vuex-persistedstate
yarn add vuex-persistedstate // yarn
可以通过storage参数来修改我们存储的位置
modules文件中注册模块
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
import common from './modules/common'
export default new Vuex.Store({
modules: {
common, // 公用
},
plugins: [
createPersistedState({
storage: window.sessionStorage, // 修改存储的状态
// paths: ['common'] // 存储的指定的模块的名字(存储某个模块对象)
})
] // 状态持久化
})
3、创建模块
- 在module文件夹下创建 comomon.js
- 在store/index.js中引入common.js,并在modules注册
- 这里做了一个简单的实例,其他的都是一样的实现方式。
// state
const state = {}
// mutations
const mutations = {}
// getters
const getters = {}
// actions
const actions = {}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
4、state
5、Getter
// Getter
const getters = {
getToken(state){
return state.token
}
}
6、mapGetters 辅助函数 获取
// Getter
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
// 方式1
...mapGetters('common', ['getToken']), // 映射为 `this.$store.getters.common.getToken`
// 方式2
getToken () {
return this.$store.getters.common.getToken
}
}
}
</script>
7、Mutation
8、Action