vue单页面应用刷新网页后vuex的state数据丢失的解决办法

第一种方案

首先将数据保存在vuex的store中，同时将这些信息也保存在sessionStorage中。这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。

sessionStorage  使用方法和 localStorage  是一样的

第二种方案

持久化

npm install vuex-persistedstate --save

import createPersistedState from "vuex-persistedstate";

 

该插件默认持久化所有state，当然也可以指定需要持久化的state：

const store = new Vuex.Store({

  modules: {

    app,

    settings,

    tagsView,

    user

  },

  getters,

  plugins: [

    createPersistedState({

      storage: window.sessionStorage,

      reducer(val) {

        return {

          // 只储存state中的

          app: val.app

        };

      }

    })

  ]

});

 

 

 

我自己使用的是 第二种  简单方便