vuex-persist数据持久化存储插件—解决vuex刷新后数据不见问题

为了保存刷新后页面数据丢失的问题，我们一般会把数据存储在localstorage或者sessionstorage中。在vue框架逐渐盛行的时候，vuex被我们常常用来进行数据的统一管理。

• vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
• vuex劣势：在F5刷新页面后，vuex会重新更新state，存储的数据会丢失。Vuex的状态存储并不能持久化

为了解决这个问题，vuex-persiste应运而生。

vuex-persist

安装

npm install --save vuex-persist

使用

• 在全局的store中，引入

import VuexPersistence from 'vuex-persist'

• state中声明的一个值

const state = {
    query: {}
}

• 在 Store中添加vuex-persist的调用

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [
        new VuexPersistence({
            reducer: state => ({
                query: state.query //这个就是存入localStorage的值
            })
        }).plugin
    ]
})

vuex-persistedstate 同 vuex-persist

安装

npm install vuex-persistedstate  --save

使用

• 在store下的index.js中

import createPersistedState from "vuex-persistedstate"

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

• 选择数据存储的位置，可以是localStorage/sessionStorage/cookie

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

• vuex-persistedstate默认持久化所有state，指定需要持久化的state

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(state) {
          return {
          // 只储存state中的user
          user: state.user
        }
     }
  })]