vuex 实现数据持久化存储

    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