使用插件让在vuex中管理的状态数据自动同时存储在本地免去自己存储的环节
1.安装vuex-persistedstate插件
npm i vuex-persistedstate
2.vuex中准备要存储的数据
例如:
在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 cart.js
// 用户状态
export default {
namespaced: true,
state: () => {
return {
profile: {
id: '',
nickname: '',
avatar: '',
token: '',
mobile: ''
}
}
}
}
// 购物车状态
export default {
namespaced: true,
state: () => {
return {
list: []
}
}
}
3.在store下的index中导入
import { createStore } from 'vuex'
import user from './modules/user'
import cart from './modules/cart'
export default createStore({
modules: {
user,
cart
}
})
4.使用vuex-persistedstate插件来进行持久化
import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
export default createStore({
modules: {
user,
cart
},
plugins: [
createPersistedstate({
key: 'erabbit-client-pc-store',
paths: ['user', 'cart']
})
]
})
说明
- 默认是存储在localStorage中
- key是存储数据的键名
- paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如
user.token
- 修改state后触发才可以看到本地存储数据的的变化
手动保存token和vuex中的数据
// 封装本地存储,以后改的话,直接在这边改
// 取值
export const getStorage = key => localStorage.getItem(key)
// 赋值
export const setStorage = (key, value) => localStorage.setItem(key, value)
// 清空
export const clearStorage = () => localStorage.clear()
// 移除
export const removeStorage = key => localStorage.removeItem(key)
export default {
getStorage,
setStorage,
clearStorage,
removeStorage
}
// vuex的变量
import { setStorage, getStorage } from '../utils/storage'
export default {
// 开启命名空间
namespaced: true,
state () {
return {
token: getStorage('token'),
refresh_token: getStorage('refresh_token'),
user: {}, // 用户基本资料
userProfile: {} // 用户的简介
}
},
mutations: {
setRefreshToken (state, refreshToken) {
state.refresh_token = refreshToken
// 给vuex存token值的时候,随便给本地存一份
setStorage('refresh_token', refreshToken)
},
setToken (state, token) {
state.token = token
// 给vuex存token值的时候,随便给本地存一份
setStorage('token', token)
},
setUser (state, payload) {
state.user = payload
},
setuserProfile (state, payload) {
state.userProfile = payload
},
clearUser (state) {
state.token = ''
state.refresh_token = ''
state.user = {}
state.userProfile = {}
}
}
}