Vuex持久化存储之vuex-persist

傷城~ 2021-09-29 13:06 386阅读 0赞

Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

引入[vuex-persist][] 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：

安装：

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]
    })

通过以上设置，在图3中各个页面之间跳转，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage 。

vuex-persist 的详细属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>key</td> 
   <td>string</td> 
   <td>将状态存储在存储中的键。默认: 'vuex'</td> 
  </tr> 
  <tr> 
   <td>storage</td> 
   <td>Storage (Web API)</td> 
   <td>可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有get和set. <strong>默认是: window.localStorage</strong></td> 
  </tr> 
  <tr> 
   <td>saveState</td> 
   <td>function (key, state[, storage])</td> 
   <td>如果不使用存储，这个自定义函数将保存状态保存为持久性。</td> 
  </tr> 
  <tr> 
   <td>restoreState</td> 
   <td>function (key[, storage]) =&gt; state</td> 
   <td>如果不使用存储，这个自定义函数处理从存储中检索状态</td> 
  </tr> 
  <tr> 
   <td>reducer</td> 
   <td>function (state) =&gt; object</td> 
   <td>将状态减少到只需要保存的值。默认情况下，保存整个状态。</td> 
  </tr> 
  <tr> 
   <td>filter</td> 
   <td>function (mutation) =&gt; boolean</td> 
   <td>突变筛选。看mutation.type并返回true，只有那些你想坚持写被触发。所有突变的默认返回值为true。</td> 
  </tr> 
  <tr> 
   <td>modules</td> 
   <td>string[]</td> 
   <td>要持久化的模块列表。</td> 
  </tr> 
 </tbody> 
</table>

先创建一个对象并进行配置：
    
    constvuexLocal =newVuexPersistence({storage:window.localStorage})
    
    引入进vuex插件：
    
    conststore =newVuex.Store({  state: { ... },  mutations: { ... },  actions: { ... },  plugins: [vuexLocal.plugin]})
    
    通过以上设置，在图3中各个页面之间跳转，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage 。
    
    vuex-persist 的详细属性：
    
    属性类型描述
    
    keystring将状态存储在存储中的键。默认: 'vuex'
    
    storageStorage (Web API)可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有get和set.默认是: window.localStorage
    
    saveStatefunction (key, state[, storage])如果不使用存储，这个自定义函数将保存状态保存为持久性。
    
    restoreStatefunction (key[, storage]) => state如果不使用存储，这个自定义函数处理从存储中检索状态
    
    reducerfunction (state) => object将状态减少到只需要保存的值。默认情况下，保存整个状态。
    
    filterfunction (mutation) => boolean突变筛选。看mutation.type并返回true，只有那些你想坚持写被触发。所有突变的默认返回值为true。
    
    modulesstring[]要持久化的模块列表。

[vuex-persist]: https://github.com/championswimmer/vuex-persist