版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:Vuex数据持久化存储_vuex持久化存储_会说法语的猪的博客-CSDN博客
怕原文被作者删除,所以复制了一遍
vuex
Vue项目中使用Vuex作为状态管理,相当于全局的变量存储,可以在所有的vue组件中共享数据、动态修改其状态。vuex是单向数据流,存在vuex中的变量都是响应式数据,组件中一般会通过computed来使用store中的状态、且有缓存但是当我们去刷新浏览器的时候,store中的状态都会被清空、重新初始化为最初的状态,在某些情况下,我们可能需要将这些状态保存下来,所以这篇来介绍如何让vuex或pinia的状态持久化存储
要实现持久化存储,简单来说就是将其状态保存到localStorage或者sessionStorage中
然后在给每个状态默认值的时候就从localStorage或sessionStorage中取就可以了也就是咱们直接手写实现,另外一种方式就是使用第三方插件(vuex-persistedstate或者vuex-persist)
方案一:使用sessionStorage或者localStorage存储
我这里是存在sessionStorage中,首先写个类,将存储方法简单封装一下,或者写个方法也可以,甚至直接存都是可以的,看个人喜好哈
utils/index.js
export class SessionUtils {
static get(key) {
return JSON.parse(window.sessionStorage.getItem(key))
}
static set(key, value) {
window.sessionStorage.setItem(key, JSON.stringify(value))
}
static remove(key) {
window.sessionStorage.removeItem(key)
}
}
然后在vuex中的使用:
import { SessionUtils } from '@/utils/index.js'
export default {
namespaced: true,
state: {
count: SessionUtils.get('count') || 0
},
mutations: {
UPDATE_COUNT(state, count) {
state.count++
SessionUtils.set('count', state.count)
}
}
}
这样其实就可以了,每当我们去修改状态的时候,都会往session中存储一下,浏览器刷新的时候,就会先从 session中取,达到持久化存储的效果
方案二:使用第三方插件
1. 安装
$ npm install vuex-persistedstate
2. 使用
import Vue from "vue";
import Vuex from "vuex";
import test from './modules/test'
import user from './modules/user'
// 引入插件
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
test,
user
},
/* vuex数据持久化配置 */
plugins: [
createPersistedState({
// 存储方式:localStorage、sessionStorage、cookies
storage: window.sessionStorage,
// 存储的 key 的key值
key: "store",
reducer(state) { //render错误修改
// 要存储的数据:本项目采用es6扩展运算符的方式存储了state中所有的数据
return { ...state };
}
})
]
})
上面是将所有的store中的state状态都持久化存储了,如果是想只持久化某一个模块的数据,则将上面plugins修改为下面写法
/* vuex数据持久化配置 */
plugins: [
createPersistedState({
// 存储方式:localStorage、sessionStorage、cookies
storage: window.sessionStorage,
// 存储的 key 的key值
key: "store",
// 只持久化存储user模块的状态
paths: ['user']
})
]
上面是用了vuex-persistedstate插件实现,使用vuex-persist这个应该也是可以的。
其实上面插件的原理跟咱们最上面的手写的一样,也就是将状态存储到本地缓存,达到持久化存储的效果,我自己用的时候,可能都是自己手写存储就可,当然完全可以使用插件,也是看自己喜好。
上面写的例子都是Vuex3的版本 ,也就是在vue2中使用的。
Vue3中使用的Vuex4或者pinia也好,都是适用的,实现持久化存储无非就是上面的思路,都一样