Vuex持久化存储之vuex-persist

比眉伴天荒 2022-11-28 10:45 308阅读 0赞

## 问题背景： ##

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

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

![format_png][]

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

通过以上设置，在图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>

转载：https://www.jianshu.com/p/a4faae6a3184

[vuex-persist]: https://github.com/championswimmer/vuex-persist
[format_png]: /images/20221124/4811b55afd2a45dd9c8cef348cc5c6be.png