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是单线程的。将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']
    })]
})

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

1 个答案: