如何在大型单板机中使用好的VueX商店设计？

Question

我确实很了解VueJS，我也很熟悉VueX的使用。我正在从事几个VueJS项目，但我正在为我的商店的设置而奋斗。

我有几个问题：

• 我如何分裂我的模块？每个资源(项目、文章等)，还是我的web应用程序中的“页面/容器”？
• 商店应该包含什么(并持久化)？UI状态，还是数据，还是两者兼而有之？
• 如何对我的模块、获取器、操作和突变使用一个好的命名？

可以肯定的是:我确实知道Vue和VueX的语法和用法。我的问题集中在VueX的结构/体系结构及其存储上。

希望你们能帮我一些条款或好的视频/帖子来解决这个问题！

提前谢谢你，鲍勃

Answer 1

我认为组织应用程序存储的方法有很多种，但我大多数时间都是这样做的：

+ store
  - actions.js // global actions (like a for snackbar singleton, loader etc)
  - getters.js // global getters (like a for snackbar singleton, loader etc)
  - index.js // import all other indexes (in the subfolders)
  - mutations.js // global mutations (like a for snackbar singleton, loader etc)
  - state.js // global state (like a for snackbar singleton, loader etc)
  + common
    - actions.js // common actions (shared with all resources)
    - getters.js // common getters (shared with all resources)
    - mutations.js // common mutations (shared with all resources)
    - state.js // common state (shared with all resources)
  + subfolder1 // a resource (like an article, a user, ...)
    - index.js // imports common/* files or siblings overriding it, and exports it
    - actions.js // optional file overriding common/actions.js
    - getters.js // optional file overriding common/getters.js
    - mutations.js // optional file overriding common/mutations.js
    - state.js // optional file overriding common/state.js
  + subfolder2 // an other resource ...
  + ...

在common文件夹中，您有“普通”资源的代码库，对于要处理的每个资源来说，不重复它会有帮助。如果有必要，您可以通过一个覆盖所需方法的专用文件来覆盖特定资源。

下面是一个针对特定资源重写common/actionos.js文件的common/actionos.js方法的文件的示例：

import { actions as baseActions } from "../common/actions"

const actions = Object.assign({}, baseActions) // we don't want to edit the base instance

// overrides the common method
actions.fetchDb = async function(context, args) {
  args.params.url = "myresource"
  await baseActions.fetchDb.call(this, context, args.params)
}

export default actions

它的主要优点是减少代码重复，保持资源分离，使您有机会在需要时调整它们的行为。

你认为这个组织能满足你的需要吗？