Javascript 大型网站中的Vuex商店体系结构

目前正在使用Vue.js构建一个大型网站， 被困在Vuex商店的体系结构中

文件夹结构现在如下所示

.
├── build
├── src
│   └── components
│       ├── Header.vue
│       └── TimeStamp.vue
│       └── Photo.vue
│   └── pages
│       ├── index.vue
│       └── about.vue (includes Header.vue, Thumbnail.vue)
├── store
│   └── index.js
│   └── modules
│       ├── Header.js
│       └── TimeStamp.js
│       └── Photo.js

基本上我的代码模式是每个组件都有一个对应的模块存储，但似乎所有模块状态都需要作为一个大的单个对象导入，这一点现在让我感到困惑，因为这意味着即使在页面中不需要时间戳组件，时间戳状态仍然存在于范围中，假设我总共有数百个状态，但我只需要

Header.js

store，所以其他所有状态实际上都是无用的

因此，我的问题是：

是否可以为每个页面创建动态状态对象。 例如，在“关于”页面中，仅导入

Header.js

和

Photo.js

， 在索引页面中，只导入

Header.js

和

TimeStamp.js

，结构如下所示

---

vuex存储的思想是，它有一个包含所有数据的单一对象。只挑选商店的一部分不符合预期设计。如果您的数据只存在于页面中，那么您可以自行管理数据，而不是使用全局范围

TL；博士 不

---

实际上，从理论上讲，可以在加载组件时加载数据，在不需要时卸载数据。然后，您可以实现自动化，但这不是通量模式的要点。

单状态对象

似乎所有模块状态都需要作为单个大对象导入

嗯，它都是作为单个对象进行管理的。但是你当然知道可以根据需要返回碎片的getter

将存储模块组合在一起非常容易

export const store=new Vuex.store({
模块：{
配置，
使用者
页，
...
},
插件：[addTagToType\u StorePlugin]
})

拥有单个对象的好处是可以添加横切代码，如上面的

addTagToType_StorePlugin

（这是为了增强开发人员工具的显示）

动态

是否可以为每个页面创建动态状态对象

当然

没有关于如何构建你的州的规则。flux模式只是为您提供了有关如何更新和访问状态的规则

您应该使用最适合您的应用程序的任何结构

您可以在上面看到，我使用了

页面

状态模块。为了让您了解动态方面，这里是初始结构

const state={
档案：{
验证：[]，
指代：[]，
诊所：[]
},
}

因此，

files

下的每个属性用于不同的页面。如果用户从未访问过“验证”页面，则不会加载状态

如何访问动态？

getter可以返回一个带有参数的函数，该参数用于“动态”选择状态片（Ref:）

开发工具和动态

上面提到的插件用于增强ChromeDevTools在修改动态数据时的显示效果。参考号

变异可能是

SET\u文件

，但是哪个页面文件？
在payload.tag中传递页面类型，此插件将更改（例如）

到

---

也许你能帮我。看看这个：

├── store
│   └── pages
│       ├── Index.js
│       └── About.js
│       └── News.js
│
│   └── modules
│       ├── Header.js
│       └── TimeStamp.js
│       └── Photo.js

const getters = {
  pageFiles: state => {
    return page => {
      return state.files[page]
    }
  },

computed: {
  pageFiles() {
    return this.$store.getters.pageFiles(this.page)
  },

const addTagToType_StorePlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.payload.tag) {
      mutation.type = `${mutation.type} / ${mutation.payload.tag}` 
    }
  })
}

SET_FILES

SET_FILES / validations