Vue simply uses store and solves the problem of data loss after refreshing

First of all, the file directory

Define the required data in our es.js file

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 }Copy the code

The second step is to export in index.js

Code on!!

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, })Copy the code

Step 3: Use it on the page where you want to store data

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

Step 4, call on the page where the data is needed

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

Step 5: Resolve page refresh data loss

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))
        })
    },
Copy the code

Ok so it can be used normally oh!! I hope I can help you solve your problem