为什么说刷新页面vuex的数据会丢失

刷新页面vuex的数据会丢失属于正常现象，(vuex的数据并不是弄丢了，而是初始化了，回到初始值，回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

解决办法?

方法一:

将state的数据保存在localstorage,sessionstorage或cookie中。

• 在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态

• 在beforeunload方法中将store.state存储到sessionstorage中。

export default {name: 'app',created () {// 在页面加载时读取sessionStorageif (sessionStorage.getItem('store')) {this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))}// 在页面刷新时将store保存到sessionStorage里window.addEventListener('beforeunload', () => {sessionStorage.setItem('store', JSON.stringify(this.$store.state))})}
}

方法二:

使用vuex-persistedstate,可以自动存储。

下载:

npm install --save vuex-persistedstate

使用:

在store.js中引入
import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({state: {count: 1},//配置 // 当state中的值发生改变，此时localStorage中的vuex的值会同步把state中的所有值存储起来，当页面刷新的时候，state的值会从localStorage自动获取vuex的value值，赋值到state中plugins: [createPersistedState()]
})

默认的是存储到localStorage里的，我们也可以存到sessionStorage中，如：

import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({state: {count: 1},//配置plugins: [createPersistedState({storage: window.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'}}})]
}）

总结

• Vuex只是在内存保存状态，刷新之后就会丢失，如果要持久化就要存起来。

• localStorage就很适合,提交mutation的时候同时存入localStorage,store中把值取出作为state的初始值即可。

• 这里有两个问题，不是所有状态都需要持久化；如果需要保存的状态很多，编写的代码就不够优雅，每个提交的地方都要单独做保存处理。这里就可以利用vuex提供的subscribe方法做一个统一的处理。甚至可以封装一个vuex插件以便复用。

• 类似的插件有vuex-persist、vuex-persistedstate,内部的实现就是通过订阅mutation变化做统一处理，通过插件的选项控制哪些需要持久化