vuex数据持久化

vuex数据持久化是为了防止vuex刷新数据丢失。如果数据要保持持久化，需要配合浏览器提供的缓存技术，window.localStorage 、cookie、window.sessionStorage、第三方持久化插件等。

了解vuex

为什么vuex没有数据持久化？先简单的了解一下vuex吧。当在项目中使用vuex共享状态时。vuex会注册了一个全局对象vuex，vuex中的state会将状态会挂载到vuex这个对象上作为属性的存在。因为vuex是注册的全局对象，所以项目的任意一个地方需要使用共享状态时，都可以根据vuex提供的方法来实现获取或设置状态，从而达到状态的共享。例如下面的例子，vuex会添加到Vue的实例里，从而实现全局访问：

import Vuex from 'vuex'
const store = new Vuex.Store({
    state:{
        count:1
    }
})
new Vue({
    el:"#app",
    store
})

vuex 数据持久化

数据持久化也就是给浏览器保存一份数据，获取时把浏览器数据赋值给state。这样就不用担心浏览器刷新而数据丢失。

设置

const store = new Vuex.Store({
    state:{
        count:count ?? 0
    },
    mutations:{
        increment (state) {
              state.count++
            //给浏览器缓存保存一份
            window.localstorage.setItem('Count',state.count++)
        }
    }
})
store.commit('increment')

获取

//获取初始值
const count = window.localstorage.getItem('Count');
const store = new Vuex.Store({
    state:{
        count:count ?? 0
    }
})

除了使用localstorage，还可以使用seesionStorage和cookie。

vuex数据持久化插件

还有很多的第三方vuex数据持久化插件。使用插件的好处不言而喻，它可以让我们更快速的实现功能，例如下面的两个插件。

• vuex-persistedstate
• vue-vuex-persist

使用vue-vuex-persist 插件

//第一步 安装
yarn add vue-vuex-persist

//第二步 编写store.js
import Vuex from 'vuex'
import vueVuexPersist from 'vue-vuex-persist';
export default new Vuex.store({
    state: hybridState,
    mutations: {
        // mutations
    },
    actions: {
        // actions
    },
})

//第三步 注册
import store from './store.js'
import vueVuexPersist from 'vue-vuex-persist';
Vue.use(vueVuexPersist,store)

使用vuex-persistedstate 插件

//第一步 安装
yarn add vuex-persistedstate


//第二步 编写store.js
import Vuex from 'vuex'
import persistedstate from './persistedstate.js'
export default new Vuex.store({
    state: hybridState,
    mutations: {
        // mutations
    },
    actions: {
        // actions
    },
    plugins:[persistedstate]
})


//第三步 persistedstate.js
import createPersistedState from "vuex-persistedstate";
import CookieStorage from "./cookie-storage.js";
// 如果使用window.localStorage 或者 window.sessionStorage 存储，就不需要第四步了。第四步时cookie缓存。三中存储方式只选择一种即可。
const persistedState = createPersistedState({
  // 默认存储到localStorage
  storage: window.localStorage

  // 存储到cookie
  // storage: CookieStorage,
});
export default persistedState;


//第四步 cookie-storage.js
//yarn addd js-cookie 先安装
import Cookies from "js-cookie";
const CookieStorage = {
  getItem: (key) => Cookies.get(key),
  setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
  removeItem: (key) => Cookies.remove(key),
};
export default CookieStorage;