在vuex的时候 刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题。在vuex中使用subscribe 和plugins 来实现本地存储与vuex相关联,实现vuex持久存储
https://vuex.vuejs.org/zh/api/#plugins 具体细节可查阅官方文档
handleStore = store => {
let localStorage = window.localStorage
if (localStorage.store) {
console.log(123);
store.replaceState(JSON.parse(localStorage.store))
console.log(store.state);
}
store.subscribe((mutation, state) => {
let oldState = JSON.parse(localStorage.getItem('store'))
let store = oldState && oldState !== '' ? Object.assign(oldState, state) : state
localStorage.setItem('store', JSON.stringify(store))
})
}
let store = () => new Vuex.Store({
state:{
platform: '',
cartCount: '',
allToken: '000'
},
mutations:{
},
actions: {
},
modules: {
},
plugins: [handleStore]
})
export default store
当页面调用commit 通过mutation修改就会触发
store.subscribe()
方法,将本地存储和vuex的state联系在一起