在使用vuex存储数据的时候刷新页面数据会消失,此时就可以使用持久化存储
使用vuex-persistedstate插件
第一步:下载插件
$ npm install vuex-persistedstate
第二步:在store的index.js里面引入插件
import createPersistedState from 'vuex-persistedstate'
第三步:在文件中使用
在getters下面使用加上
plugins: [
//1.0默认是localStorage
ceratePersistedState()
//2.0想要改变存储方式
createPersistedState({
// storage: window.sessionStorage或者window.localStorage或者window.cookie,
// 存储的 key 的key值
key: "store",
reducer(state) {
//1.0 如果想要存储state中的某些值
return {
near:state.near,
mid:state.mid,
far:state.far
};
//2.0 如果想要存储state中的所有值
return{
...state
}
})
]