1.vuex插件
vuex-persistedstate
插件在每次mutation的时候将数据保存,存到localStorage,sessionStorage,cookie有中(具有getItem ,setItem ,removeItem一般方法的对象),然后页面初始化的时候,读取存储的state值,覆盖state的初始值
2.js插件
vue-vuex-persist
和vuex插件每次mutation保存对象相似,这就给我们提供另外一种缓存思路。
vue-vuex-persist利用浏览器生命周期中的beforeunload事件。beforeunload会在页面卸载之前执行。如刷新,返回到其他页面,关闭等操作都会触发这个事件。
这里主要介绍第一种
cnpm install vuex-persistedstate --save
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
plugins: [createPersistedState()],
})
默认存在localStorage中
也可以设定存在sessionStorage中
const store = new Vuex.Store({
plugins: [createPersistedState({ storage: window.sessionStorage })],
})
还可以用cookie, 用官方给的demo并没有成功,推荐还是用上面的方法
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
const store = new Vuex.Store({
plugins: [createPersistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
removeItem: key => Cookies.remove(key)
}
})],
})