vue 简单使用store ，并解决刷新后数据丢失问题

首先文件目录

在我们es.js文件中定义需要的数据

const state = () => ({
esObject: [],
});
// getters
const getters = {};
const actions = {
esObject(state, data) {
    state.commit('esObject', data)
},
};
// mutations
const mutations = {
esObject(state, data) {
    state.esObject = data;
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

第二步在index.js中导出

上代码！！！

import Vue from 'vue'

import Vuex from 'vuex'

import es from './module/es'

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({

modules: {
    es,
},
strict: debug,
})

第三步，在需要存数据的页面使用

this.$store.dispatch('es/channelsObject', res.data.data.data);

第四步，在需要用到数据的页面调用

  computed: mapState({
        es: state => {
            return state.es
        },
    }),

第五步：解决页面刷新数据丢失

created() {

 if (sessionStorage.getItem('store')) {
            this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
        }
        window.addEventListener("beforeunload", () => {
            sessionStorage.setItem('store', JSON.stringify(this.$store.state))
        })
    },

好了这样就可以正常使用了哦！！！希望可以帮你们解决你的问题