一：数据丢失的原因
vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。
因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。
二：解决的思路
将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
页面刷新后再从浏览器中取出
三：解决方法
方法一：
直接在vuex修改数据方法中将数据存储到浏览器本地存储中
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store（{ state: { orderList: [], menuList: [] }, mutations: { orderList(s, d) { s.orderList= d; window.localStorage.setItem("list",jsON.stringify(s.orderList)) }, menuList(s, d) { s.menuList = d; window.localStorage.setItem("list",jsON.stringify(s.menuList)) }, } }）
在页面加载时再从本地存储中取出并赋给vuex
if (window.localStorage.getItem("list") ) {
this.$store.replaceState(Object.assign({},
this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}
if (window.localStorage.getItem("list") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list")))) }
在此可以进行优化
通过监听beforeunload事件来进行数据的localStorage存储，beforeunload事件在页面刷新时进行触发，具体做法是在App.vue的created()周期函数中下如下代码：
if (window.localStorage.getItem("list") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list")))) } window.addEventListener("beforeunload",()=>{ window.localStorage.setItem("list",JSON.stringify(this.$store.state)) })
方法二：
利用第三方库进行持久化存储
安装 vuex-persistedstate
npm install --save vuex-persistedstate
在store文件夹下的indedx.js中配置信息
使用vuex-persistedstate默认存储到localStorage
import createPersistedState from "vuex-persistedstate" const store =newVuex.Store({ state: { count: 1 }, mutations: {}, actions: {}, // 当state中的值发生改变，此时localStorage中的vuex的值会同步把state中的所有值存储起来，当页面刷 新的时候，state的值会从localStorage自动获取vuex的value值，赋值到state中 plugins: [createPersistedState()] })
使用vuex-persistedstate存储到sessionStorage
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, plugins: [createPersistedState({ storage:window.sessionStorage // 同localStorage相同，只是将vuex的所有值存储到sessionStorage中 })] })
使用vuex-persistedstate指定需要持久化的state
import createPersistedState from "vuex-persistedstate" const store = newVuex.Store({ state: { count: 0 }, mutations: {}, actions: {}, plugins: [createPersistedState({ storage:window.sessionStorage, reducer(val) { // 此时，当count发生改变的时候，就会调用此函数，并且val的值为当前state对象，return的值为当前本地存储的value值（本地存储的key值为vuex） return { count: val.count, changeCount: 'aaa' } } })] }）
四：总结
其实解决此问题的方法有很多,基本上都是要借助于localStorage或者sessionStroage来存放。
