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

Posted 2023-02-22

【中文标题】防止 VueX 中的持久状态锁定应用程序

【英文标题】：Prevent persisted state locking up app in VueX

【发布时间】：2019-01-17 22:55:10

【问题描述】：

我正在使用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) 
      ) 
    
  )],
)

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

【参考方案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']
    )]
)

【讨论】：

这是有道理的。不敢相信我没想过要分裂各州。谢谢！

我认为最好的解决方案是不对这些数据使用持久状态。我只会将其用于帐户详细信息。