Vuex：在商店中使用延迟承诺

Question

我有多个 Vuex 模块，它们应该访问来自 API 的单个值（功能标志 bool）。我希望延迟加载此 API 值，这意味着仅在另一个存储模块内的第一个操作需要它时加载。我想象这样的事情：

export const default {
   actions: {
      async method1({rootState, commit}){
         // if its the first call to deferred, the value should be loaded through the API
         // otherwise the stored value should be used
         const lazyLoadedValue = await rootState.sharedModule.deferred;
         // do something with lazyLoadedValue
      }
   }
}

我可能可以使用类似

Thenable

的东西来解决它，但它似乎不适合

state

、

actions

和

mutations

的 Vuex 风格。

Vuex 的正确方法是什么？

Answer 1

要从 Vuex 中的 API 实现值的延迟加载，您可以利用 getter 和 actions 来管理值的加载状态和缓存。

// sharedModule.js

export default {
  state: () => ({
    deferredValue: null,
    loadingDeferredValue: false,
  }),
  mutations: {
    setDeferredValue(state, value) {
      state.deferredValue = value;
    },
    setLoadingDeferredValue(state, loading) {
      state.loadingDeferredValue = loading;
    },
  },
  actions: {
    async loadDeferredValue({ commit, state }) {
      if (!state.deferredValue && !state.loadingDeferredValue) {
        commit('setLoadingDeferredValue', true);
        try {
          const response = await fetch('your-api-url');
          const data = await response.json();
          commit('setDeferredValue', data);
        } catch (error) {
          console.error('Error loading deferred value:', error);
        } finally {
          commit('setLoadingDeferredValue', false);
        }
      }
    },
  },
  getters: {
    deferredValue: (state) => state.deferredValue,
  },
};

然后，在您的组件或另一个模块中：

// YourComponent.vue
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup() {
    const store = useStore();
    const deferredValue = computed(() => store.getters['sharedModule/deferredValue']);

    // Load the deferred value if not loaded already
    if (deferredValue.value === null) {
      store.dispatch('sharedModule/loadDeferredValue');
    }

    // Your component logic using deferredValue

    return {
      deferredValue,
    };
  },
});

此方法可确保仅在需要时从 API 获取该值，并缓存以供后续访问。