vuex-along解决vuex中存储的数据在页面刷新之后失去的问题

一. 发现问题

在vue项目的开发中经常会用到vuex来进行数据的存储，然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题。

二. 解决问题

一般采用cookie、sessionStorage或localStorage等方法,但是操作会比较繁琐，所以封装好的vuex-along 插件可能更实用。

安装
npm install vuex-along --save
yarn add vuex-along

基本使用：
到此为止，插件已经生效了，默认会存储所有 state 到 localStorage

接下来说说更详细的用法：

传入需要的参数来满足使用需求

import Vue from 'vue';
import Vuex from 'vuex';
import createVuexAlong from "vuex-along";

const moduleA = {
  state: {
    a1: "hello",
  }
};

const store = new Vuex.Store({
  state: {
    count: nll
     token:''",
  },
  mutations: {
    set_count: (state, payload) => {
      state.count= payload
    },
    set_token: (state, payload) => {
      state.token = payload
    },
  plugins: [
    createVuexAlong({
      name: "hello-vuex-along", // 设置保存的集合名字，避免同站点下的多项目数据冲突
      local: {
        list: ["ma"],
        isFilter: true // 过滤模块 ma 数据， 将其他的存入 localStorage
      },
      session: {
        list: ["count", "ma.a1"] // 保存 count 和模块 ma 中的 a1 到 sessionStorage
      }
      //如果对于sessionstorage不进行任何操作，也可将session设为false
    })
  ]
});

参数：

VuexAlongOptions

字段	必选	类型	描述
name	否	String	设置本地数据集合的名字，默认为 vuex-along
local	否	Object	localStorage 的配置，见 #WatchOptions
session	否	Object	sessionStorage 的配置，见 #WatchOptions
justSession	否	Boolean	仅使用 sessionStorage

WatchOptions

字段	必选	类型	描述
list	是	String []	需要监听的属性名或模块名的字符串列表
isFilter	否	Boolean	过滤 list 中的字段而非保存

数据清理：

window.clearVuexAlong(local = true, session = true):void;
clearVuexAlong() // localStorage 和 sessionStorage 都会被清理
clearVuexAlong(true,false) // 只清理 localStorage
clearVuexAlong(false,true) // 只清理 sessionStorage