防止 VueX 中的持久状态锁定应用程序

Question

我正在使用vuex-persistedstate 模块来跟踪我的状态并将其保存到localStorage。问题是由于需要保存的状态量，每次更新我的数据时应用都会被锁定。

为了解决这个问题，我尝试使用一个承诺来允许在生成字符串的同时执行业务计算。字符串准备好后，应将其设置为localStorage。

这就是我所拥有的：

const buildLocalStorageString = async (state) => {
  return await JSON.stringify(state);
}

export default new Vuex.Store({
  state: { etc, etc, etc },

  plugins: [createPersistedState({
    key: 'myApp',
    setState (key, state, storage) {
      buildLocalStorageString(state).then(string => {
        storage.setItem(key, string) 
      }) 
    }
  })],
})

问题是，它不能解决问题。应用更新时仍有明显延迟。

Answer 1

All localStorage calls are synchronous. 并且 Javascript 是单线程的。将 1 大块数据保存到本地存储总是会阻塞所有其他执行。

我会通过拆分数据并将其分别保存到本地存储中来解决这个问题。基本上，只需使用多个createPersistedState。

一个极其简单的示例实现可能如下所示

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)

const moduleA = {
    state: {
        a: 'a'
    },
    mutations: {
        updateA(state) {
            state.a += 'a';
        }
    }
}

const moduleB = {
    state: {
        b: 'b'
    }
}

export default new Vuex.Store({
    modules: {
        moduleA: moduleA,
        moduleB: moduleB
    },
    plugins: [createPersistedState({
        key: 'vuex_a',
        paths: ['moduleA']
    }), createPersistedState({
        key: 'vuex_b',
        paths: ['moduleB']
    })]
})