vuex+localStorage vuex刷新失效？

想必大家在使用vuex的时候,vuex刷新后数据失效的问题会困扰大家，本文教大家如何利用本地缓存保存状态

Install

npm install vuex-along --save


1.import 导入
import vuexAlong from 'vuex-along'


  2.add to store
添加至store的 plugins 的数组里
export default new Vuex.Store({
  state:{...},
  ...
  plugins: [vuexAlong]
});


Default save all state
默认保存所有内容
If you don`t want to save all state. Use watch()
只保存部分内容可以使用 watch 方法
vuexAlong.watch(arry,boolean)
arry: attribute or module name list
第一个参数是 属性名或模块名 的数组
boolean (non-essential):  Default true
第二个参数不是必须的 默认true
true = save arry
true 会把 arry 作为要保存的列表
false = filter arry
false 会把 arry 作过滤的列表
If you need clean save. Use clean()
想要清除 localstorage 调用 clean 方法
vuexAlong.clean()




Demo
import Vuex from 'vuex'
import Vue from 'vue'
import vuexAlong from 'vuex-along'


Vue.use(Vuex);


//filter title & num
//此处为保存时过滤 title 和 num
vuexAlong.watch(['title','num'],false);
const state = {
  num: 0,
  title: 'hello',
  name: 'boen',
  people: {
    men: 10,
    women: 10
  }
};
const mutations = {
  addNum(state){
    state.num ++;
  }
};
export default new Vuex.Store({
  state:state,
  mutations:mutations,
  //add vuexAlong
  plugins: [vuexAlong]
});