使用Vuex存储未知数量的文件。

Question

背景资料

我目前正在使用Nuxt.js和Netlify CMS来创建一个网站，在这个网站上，管理员可以动态地添加子类目到主类目中--例如：如果你是销售头发产品，你可能希望添加 "发蜡 "这个子类目。当在CMS中添加产品时，用户必须选择他们已经创建的子类别之一。

到目前为止，这样做的效果非常好，当用户创建一个新的发制品时，这个产品会存储在'assetscontenthair[SUBCATEGORY]product.json'下，例如：'assetscontenthairshampoococonut_shampoo.json'。

下面是另一种可视化的方式。

问题

然而，当我想使用Vuex存储这些产品时，问题就出现了。目前，我正在手动输入要从哪个类别文件夹中检索产品：从'vue'导入Vue

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

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

export const mutations = {
  SET_SHAMPOO_PRODUCTS(state, data) {
state.shampoo = data
  }
};

export const actions = {
  async nuxtServerInit({ dispatch }) {
  await dispatch('getShanpooProducts')
  },
  async getShampooProducts({ state, commit }) {
  let context = await require.context('~/assets/content/subcategories/hair/shampoo', false, /\.json$/);

  let products = context.keys().map(key => {
      let res = context(key);
      res.slug = key.slice(2, -5);
      return res;
  });

  commit('SET_SHAMPOO_PRODUCTS', products)
  }
};

当我知道将被包含的子类别时，这个方法是可行的，但是由于用户（管理员）可以创建任意多的子类别，这就在'hair'目录下提供了未知数量的文件夹。

那么，我怎样才能在不知道有多少子类别文件夹的情况下，存储在'hair'目录下的每个子类别文件夹呢？