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

Question

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

为了解决这个问题，我尝试使用一个 promise ，允许在生成字符串的同时执行业务计算。字符串准备就绪后，应将其设置为 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 是单线程的。将一大块数据保存到本地存储中总是会阻塞所有其他执行。

我会通过拆分数据并将其分别保存到本地存储来解决这个问题。基本上，只需使用多个 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']
    })]
})