javascript - 使用 Vuex 进行精细组织

Question

我正在做一个相当大的项目，我想将Vuex模块分成尽可能多的部分。例如，我想将API功能从中分离出来UI，将来自服务器的数据与组件标志隔离开来，等等。

在文档（http://vuex.vuejs.org/en/structure.html）中，作者建议将所有内容分解为modules，这很好。当我拥有products页面和products数据时，问题就出现了，我想让它们分开。

是否有可能实现这样的目标：

{
  modules: {
    api: {
      products: // ...
    },
    pages: {
      products: // ...
    }
  }
}

并且能够像store.api.products和store.pages.products？我弄错了吗？

谢谢！

Answer 1

我一直在看vuex代码，我发现了这个：

// retrieve nested modules
const nestedMutations = this._createModuleMutations(module.modules, newNestedKeys)

事实证明，您实际上可以vuex通过以下方式使您的模块变得细化：

{
  modules: {
    api: {
      modules: {
        products: /* ... */
      }
    },
    components: {
      modules: {
        page: /* ... */
      }
    }
  }
}

这将导致一个状态结构，如：