VUEX刷新数据丢失问题出在哪里?

其实答案很简单，因为js代码运行在内存中，代码运行时所有的变量和函数都是保存在 内存 中的，但我们 按下F5的时候以前申请的内存将会被释放，并会被重新加载js脚本，变量重新赋值。所以在我们使用vuex的时候只要一刷新数据就没了。如果我们想要持久化保存可以使用 localStorage 或者 sessionStorage 存储本地数据保证刷新后数据不会丢失。

使用本地存储

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    //  直接使用本地存储的方式
    name: JSON.parse(sessionStorage.getItem('name')) || 'name'
  },
  mutations: {
    set(state, data) {
      //  修改数据的时候直接存到本地
      sessionStorage.setItem('name', JSON.stringify(data))
      state.name = data
    }
  },
})

使用插件方式

下载插件

npm install vuex-persistedstate --save

全局store都是用localStorage存储

import Vue from 'vue'
import Vuex from 'vuex'
//  配置插件vuex-persistedstate插件
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    name: 'name'
  },
  mutations: {
    set(state, data) {
      state.name = data
    }
  }
})

全局store使用sessionstorage存储

import Vue from 'vue'
import Vuex from 'vuex'
//  配置插件vuex-persistedstate插件
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage
  })],
  state: {
    name: 'name'
  },
  mutations: {
    set(state, data) {
      state.name = data
    }
  }
})

存储指定store数据

import Vue from 'vue'
import Vuex from 'vuex'
//  配置插件vuex-persistedstate插件
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState({
    //  存到sessionStorage
    storage: window.sessionStorage,
    //  传入的val是所有的store值
    reducer(val) {
      console.log(val);
      return {
        // 只储存state中的user
        user: val.user
      }
    }
  })],
  state: {
    name: 'name',
    user: "user"
  },
  mutations: {
    set(state, data) {
      state.name = data
    },
    u(state, data) {
      state.user = data
    }
  }
})

页面刷新存储store

export default function (ctx) {
    //离开页面 刷新前 将store中的数据存到session
    window.addEventListener('beforeunload', () => {
        sessionStorage.setItem("storeCache", JSON.stringify(ctx.store.state))
    });
    //页面加载完成  将session中的store数据
    document.addEventListener('DOMContentLoaded', () => {
        let storeCache = sessionStorage.getItem("storeCache")
        if (storeCache) {
            // 将session中的store数据替换到store中
            ctx.store.replaceState(JSON.parse(storeCache));
        }
    });
}