Question

我确实很了解VueJS，并且我对VueX的使用很熟悉。我正在从事多个VueJS项目，但是我在商店的设置上苦苦挣扎。

我有几个问题：

如何拆分模块？每个资源（项目，文章等 cetera），还是我的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文件夹中，您具有“普通”资源的代码库，它有助于避免与要处理的每种资源重复使用。如有必要，您可以通过专用文件覆盖特定资源，以覆盖所需的方法。

以下是一个文件的示例，该文件覆盖了特定资源的fetchDB文件的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

主要优点是，它减少了代码重复，并使您的资源分开，让您有机会根据需要调整其行为。

您认为该组织可以满足您的需求吗？

如何在大型SPA中使用优质的VueX商店设计？

1 个答案: