created() {
/生命周期
// 监听页面刷新,当页面刷新将store里面的数据保存到sessionStorage
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state.allist))
})//声明变量 通过sessionStorage.getitrem('store')获取vuex的数据并赋值给变量
const oldStore = sessionStorage.getItem('store')
// 第一次进入页面时为null,后面如果刷新页面将会有值,则会替换Vuex里面的数据
if (oldStore !== null) {//通过深拷贝的形式 将数据赋值给 vuex中state的allist 变量
this.$store.state.allist = JSON.parse(oldStore)//删除sessionStorage的数据
sessionStorage.removeItem('store')
}
},,
vuex的派发和储存
store里的代码段
export default new Vuex.Store({
state: {
// 数据存储库
allist: []
},
getters: {
},
mutations: {
// state提交的地方 data接受到的数据
allist(state, data) {
// 数据库里每次都添加接受到的数据
return state.allist.push(data)
}
},
actions: {
// 异步添加数据
// 先通过提交到commit payload是接受到的数据
AsyncAddNum({ commit }, payload) {
commit('allist', payload)
},
},
modules: {
}
})
组件里的代码段
this.$store.dispatch('AsyncAddNum',this.jsonContent)
// this.isonContent是获取的组件数据
//同步 添加到mutions
this.$store.commit('allist',this.jsonContent)
获取数据
this.$store.state.allist