一. 发现问题

在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

字段必选类型描述
nameString设置本地数据集合的名字,默认为 vuex-along
localObjectlocalStorage 的配置,见 #WatchOptions
sessionObjectsessionStorage 的配置,见 #WatchOptions
justSessionBoolean仅使用 sessionStorage

WatchOptions

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

数据清理:

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

前往低代码交流专区

更多推荐