在开发过程中你会发现一旦你刷新了页面vuex就会被重置，刷新浏览器的话会导致js重新加载，Vuex的Store全部重置, 所以为了防止这类情况的发生的话，一般来说我们会用localStorage对vuex进行一个存储，防止Vuex丢失的情况。但是如此这样做的话在每次状态变更时都要手动的去存储下，这样就比较麻烦了，查看vuex文档官方给我们提供一个插件选项，这时我们就会想通过插件了做这些动作了，看下vuex插件如何写的。
const myPlugin = store => {
// 当 store 初始化后调用
store.subscribe((mutation, state) => {
// 每次 mutation 之后调用
// mutation 的格式为 { type, payload }
})
}
然后像这样使用：
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
由此我们可以这样做：
const myPlugin = store => {
// 当 store 初始化后调用
store.subscribe((mutation, state) => {
// 每次 mutation 之后调用
// mutation 的格式为 { type, payload }
localStorage.setItem("store", JSON.stringify(state)) //因为vuex都是通过mutation来修改数据的，所以在每次修改的时候都把state存到本地内存中
})
}
这只是一种比较简单的处理vuex存储的数据会丢失问题。如果有时间可以自己写插件将其完善，在此推荐使用vuex-persistedstate插件该插件已经比较完美的做了上述事情
安装
npm install vuex-persistedstate --save
使用
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()]
})
createPersistedState([options])参数使用说明
- key 存储持久状态的键。（默认：vuex）
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
key: 'stort' //localStorage名为stort
})]
})
- paths 用于部分保持状态的任何路径的数组。如果没有给定路径，则将保持完整状态 （默认：[]）
const state = {
userInfo: null,
token :null
};
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
paths : [
'userinfo' //localStorage只保存userinfo信息
]
})]
})
- reducer <Function> 一个函数，将被调用来减少基于给定的路径持久化的状态。默认包含这些值
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
reducer(state,paths) {
return {
// 只储存state中的user
user: state.userInfo //只存储userInfo信息并且在localStorage中userInfo命名替换成user
}
}
}
})]
- subscriber <Function>：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
- storage <Object>：而不是（或与）getState和setState。默认为localStorage。
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage //选择sessionStorage 进行存储
}
})]
- getState <Function>：将被调用以重新水化先前持久状态的函数。默认使用storage。
- setState <Function>：将被调用来保持给定状态的函数。默认使用storage。
- filter <Function>：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true
- arrayMerger<function>：用于在重新水化状态时合并数组的函数。默认为功能（存储，保存）返回保存（保存状态替换提供状态）。
自定义存储
如果在本地存储中有Vuex存储的状态是不理想的话。您可以轻松实现使用cookie的功能（或者您可以想到的任何其他功能）
import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
const store = new Store({
// ...
plugins: [
createPersistedState({
storage: {
getItem: key => Cookies.get(key),
// Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
removeItem: key => Cookies.remove(key)
}
})
]
})
