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也好 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，都是适用的















，实现持久化存储无非就是上面的思路
  
  
  
  
  
  
  
  
，都一样