安装
npm install vuex-persistedstate
用法
根据目录结构在store下的index.js文件下引入
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
modules: {
user
},
strict: debug,
plugins: [
createPersistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 1 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
配置
vuex-persistedstate默认持久化所有state,指定需要持久化的state移步官网API:vuex-persistedstate
plugins提供三种方式存储 (localStorage、sessionStorage、cookie) 默认localStorage
可根据个人喜好配置plugins
localStorage
export default new Vuex.Store({
modules: {
user
},
strict: debug,
plugins: [
createPersistedState() // 默认localstorage
]
})
sessionStorage
export default new Vuex.Store({
modules: {
user
},
strict: debug,
plugins: [
createPersistedState({
storage: window.sessionStorage
})
]
})
cookie
安装
npm install js-cookie
引入
import * as Cookies from 'js-cookie'
具体写法
export default new Vuex.Store({
modules: {
user
},
strict: debug,
plugins: [
createPersistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 1 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
附上完整代码
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
modules: {
user
},
strict: debug,
plugins: [
createPersistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 1 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
接下来就可以去页面中肆无忌惮的刷新啦
有没有大佬知道cookie方式为什么要这样写?
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 1 }),
removeItem: key => Cookies.remove(key)
}
AIGC爱好者 专注AI提效 共同学习交流