Question

我正试图了解为什么the Netlify CMS Nuxt guide选择通过以下方式实现自己的方式：

在nuxtServerInit（）中用所有博客帖子填充商店：

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

export const mutations = {
  setBlogPosts(state, list) {
    state.blogPosts = list;
  },
};

export const actions = {
  async nuxtServerInit({ commit }) {
    let files = await require.context('~/assets/content/blog/', false, /\.json$/);
    let blogPosts = files.keys().map(key => {
      let res = fi
les(key);
      res.slug = key.slice(2, -5);
      return res;
    });
    await commit('setBlogPosts', blogPosts);
  },
};

使用他们刚刚填充的商店填充“博客索引”页面：

export default {
  computed: {
    blogPosts() {
      return this.$store.state.blogPosts;
    },
  },
};

，但随后未在各个博客页面上使用商店，而是使用require：

export default {
  async asyncData({ params, payload }) {
    if (payload) return { blogPost: payload };
    else
      return {
        blogPost: await require(`~/assets/content/blog/${params.blog}.json`),
      };
  },
};

以某种方式在各个博客页面上使用require更快吗？为什么您不可以只逛商店（假设博客文章不多）并找到所需的那篇文章？

也许是微不足道的，但是由于Netlify是以这种方式编写的，因此我认为这是有充分理由的。

它与Webpack有关，还是与Vue和Vuex或Nuxt有关？

为什么Netlify CMS Nuxt指南在某些组件中使用Vuex存储，而在其他组件中直接使用require（）？

0 个答案: