Vuex数据持久化存储

Posted 2023-04-03 会说法语的猪

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也好，都是适用的，实现持久化存储无非就是上面的思路，都一样

vuex-persist数据持久化存储

vuex-persist数据持久化存储插件

Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下
pexels-photo-1211847.jpeg
安装：
npm install --save vuex-persist
or
yarn add vuex-persist

引入：

import VuexPersistence from 'vuex-persist'

先创建一个对象并进行配置：

const vuexLocal = new VuexPersistence(
    storage: window.localStorage
)

引入进vuex插件：

const store = new Vuex.Store(
  state:  ... ,
  mutations:  ... ,
  actions:  ... ,
  plugins: [vuexLocal.plugin]
)