vuex数据状态持久化( 解决刷新以后vuex里面存储的state会被浏览器释放掉)

vuex数据状态持久化( 解决刷新以后vuex里面存储的state会被浏览器释放掉)

在使用 vuex 的时候, 刷新以后里面存储的 state 就会被浏览器释放掉,因为我们的 state 都是存储在内存中的,所以一刷新页面就会把 state 中的数据重置,这就涉及到vue数据持久化的问题。

解决方式:

使用 vuex-persistedstate 这个插件,来实现将数据存储到本地,从而实现刷新后 state 仍然还存在。

1、安装  vuex-persistedstate 

npm install vuex-persistedstate

2、引入使用

import createPersistedState from 'vuex-persistedstate'   // 引入
const store = new Vuex.Store({
  state: {
    menuslist: []
  },
  plugins: [createPersistedState()] //加上这个就可以了 (使用)
})

使用插件会比较方便,不用手动设置。