Vuex非常适合在你的应用程序中处理状态,但有时你想要它在多个页面负载中持续下去,而不是什么。这样做的天真方法(和我一样有罪)是在每个突变中添加一个快速的小函数呼叫,以便将你的应用程序的当前状态保存到localStorage。 不是一个很好的解决方案,但只是不够糟糕,这往往是足够的。 但有更好的方法。 Vuex实际上有插件支持,并且 vuex-persist是一个小小的插件,自动同步你的商店与localStorage,或任何其他存储方法支持Iget/Item/Item/clear
界面。
安装
在您的 Vue.js 项目中安装 vuex-persist。
1# Yarn
2$ yarn add vuex-persist
3# or NPM
4$ npm install vuex-persist --save
使用
现在,无论您在何处初始化您的商店(这可能因项目而异),请导入vuex persist
并将其初始化为Vuex
的插件。
1[label main.js (Partial)]
2import Vue from 'vue'
3import App from 'App.vue';
4import Vuex 'vuex';
5import VuexPersist from 'vuex-persist';
6
7Vue.use(Vuex);
8
9const vuexLocalStorage = new VuexPersist({
10 key: 'vuex' // The key to store the state on in the storage provider.
11 storage: window.localStorage, // or window.sessionStorage or localForage
12 // Function that passes the state and returns the state with only the objects you want to store.
13 // reducer: state => state,
14 // Function that passes a mutation and lets you decide if it should update the state in localStorage.
15 // filter: mutation => (true)
16})
17
18const store = new Vuex.Store({
19 ...
20 plugins: [vuexLocalStorage.plugin]
21});
22
23...
24
25new Vue({
26 store,
27 el: '#app',
28 render: h => h(App)
29});
使用减量选项。
该减少器
选项允许您仅存储状态的某些部分. 这是一个简单的函数,它通过了完整的状态树,并预计会返回包含您想要保留的状态树的部分的对象。
1const vuexLocalStorage = new VuexPersist({
2 storage: window.localStorage, // or window.sessionStorage or localForage instance.
3 // Function that passes the state and returns the state with only the objects you want to store.
4 reducer: state => ({
5 keepThisModule: state.keepThisModule,
6 keepThisModuleToo: state.keepThisModuleToo
7 // getRidOfThisModule: state.getRidOfThisModule (No one likes it.)
8 })
9})
使用过滤器选项。
有时某些突变不应该触发商店同步,例如,如果您每隔几毫秒出现一个被称为突变,每次被呼叫时更新存储将导致性能的巨大下降。
1const badMutations = [
2 'someMutationThatGetsCalledTooOften'
3]
4
5const vuexLocalStorage = new VuexPersist({
6 storage: window.localStorage, // or window.sessionStorage or localForage
7 // Function that passes the state and returns the state with only the objects you want to store.
8 // someMutationThatGetsCalledTooOften gets ignored
9 filter: mutation => (badMutations.indexOf(mutation.type) === -1) // Boolean
10})