使用 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: /* ... */
      }
    }
  }
}

它会导致状态结构如下：

使用 Vuex 进行细粒度组织

Granular organisation with Vuex

javascript

architecture

vue.js

vuex