NuxtJS - 如果数据已经存在于状态中，则防止获取？

Question

我有一个使用NuxtJS和无头Wordpress CMS构建的组合网站。在几个页面上，我导入了一个mixin，看起来像这样。

import { mapActions, mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      galleries: state => state.portfolio.galleries[0],
    })
  },

  methods: {
    ...mapActions('portfolio', ['fetchGalleries']),
  },

  async fetch() {
    await this.fetchGalleries();
  }
}

Vuex模块看起来是这样的

export const state = () => ({
  galleries: [],
});

export const actions = {
  async fetchGalleries({ commit }) {
    let res = await this.$axios.$get(`${process.env.WP_API_URL}/wp/v2/media`);
    const data = res.reduce((acc, item) => {
      const { slug } = item.acf.category;
      (acc[slug] || (acc[slug] = [])).push(item);
      return acc;
    }, {});

    commit('setGalleries', data);
  }
};

export const mutations = {
  setGalleries(state, data) {
    state.galleries.push(data);
  }
};

fetch 在页面加载前， mixin用来从api返回数据。然而我注意到，每次我导航到一个新页面时，它都会运行同样的 fetch 并不断向Vuex状态添加重复数据。

如何防止 fetch 从运行并不断向我的状态添加重复数据，如果它已经存在？

Answer 1

我不知道为什么这个问题会让我如此困扰，但我想出了一个非常简单的解决方案。

async fetch() {
  if (this.galleries.length) return;
  await this.fetchGalleries();
}

只需在函数的第一行添加一个有条件的返回语句作为 fetch 职能。