vuex状态持久化管理

亦凉 2024-04-19 09:35 33阅读 0赞

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，也可以通过插件vuex-persistedstate。

### 1.手动利用HTML5的本地存储 ###

**方法**

1、vuex的state在localStorage或sessionStorage中取值；

2、在mutations中,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。

这样state就会和存储一起存在并且与vuex同步

--------------------

### 2.利用vuex-persistedstate插件 ###

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法。

**使用方法**

**安装**

> **npm install vuex-persistedstate --save**

**引入及配置：在store下的index.js中**

import createPersistedState from "vuex-persistedstate" 
       
       conststore =newVuex.Store({ 
       
         // ... 
       
         plugins: [createPersistedState()] 
       
       })

默认存储到localStorage

--------------------

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate" 
       
       conststore = newVuex.Store({ 
       
            // ... 
       
           plugins: [createPersistedState({ 
       
                storage: window.sessionStorage 
       
           })] 
       
       })

默认持久化所有state

--------------------

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate" 
       
       conststore = newVuex.Store({ 
       
         // ... 
       
         plugins: [createPersistedState({ 
       
         storage:window.sessionStorage, 
       
             reducer( val)  { 
       
                  return { 
       
                      // 只储存state中的assessmentData 
       
                     assessmentData: val.assessmentData 
       
                 } 
       
             } 
       
         })] 
       
       }）

--------------------

vuex引用多个插件的写法

譬如：vuex提示的插件和持久化的插件一起使用，配置如下

> import createPersistedState from "vuex-persistedstate"

import createLogger from 'vuex/dist/logger'

// 判断环境 vuex提示生产环境中不使用

constdebug = process.env.NODE_ENV !== 'production' 
       
       constcreatePersisted = createPersistedState({ 
       
            storage: window.sessionStorage 
       
       }) 
       
       exportdefaultnewVuex.Store({ 
       
         // ... 
       
         plugins: debug ? [createLogger(), createPersisted] : [createPersisted] 
       
       })

plugins要是一个一维数组不然会解析错误