Question

目前正在与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

基本上我的代码模式是每个组件都有一个对应的模块存储，但似乎所有模块状态都需要作为一个大的SINGLE对象导入，这点让我感到困惑，因为它意味着甚至在一个页面中不需要TimeStamp组件，TimeStamp状态仍然存在于范围内，让我们说如果我总共有数百个状态，但我只需要Header.js存储，所以其他所有状态实际上都没用。

因此，我的问题是：

是否可以为每个页面创建动态状态对象。例如，在“关于”页面中，仅导入Header.js和Photo.js，在“索引”页面中，只导入Header.js和TimeStamp.js，结构与下面的内容类似。

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

Answer 1

单州对象

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

嗯，所有托管都是一个对象。但是你当然知道可以根据需要返回碎片的吸气剂吗？

将商店模块放在一起很容易

export const store = new Vuex.Store({
  modules: {
    config,
    user,
    pages,
    ...
  },
  plugins: [addTagToType_StorePlugin]
})

关于拥有单个对象的事情是你可以添加横切代码，例如上面的addTagToType_StorePlugin（这是为了增强开发人员工具的显示）。

动态

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

绝对。

没有关于如何结构您的州的规则。通量模式只为您提供有关如何更新和访问状态的规则。

您应该使用最适合您应用的结构。

您可以在上面看到，我使用了pages状态模块。为了让您了解动态方面，这是初始结构。

const state = {
  files: {
    validations: [],
    referentials: [],
    clinics: []
  },
}

因此，files下的每个属性都是针对不同的页面。如果用户从未访问过“验证”页面，则状态永远不会被加载。

如何访问动态状态？

你的getter可以返回一个带参数的函数，该函数用于“动态”选择状态切片（Ref：Vuex Getters）。

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

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

Devtools和动态状态

上面提到的插件用于在改变动态数据时增强chrome devtools显示。参考vue-devtools

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

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

SET_FILES

到

SET_FILES / validations

Answer 2

vuex商店的想法是它有一个包含所有数据的对象。仅挑选商店的部分内容违背了预期的设计。如果您的数据仅在您的页面中保留，那么您可以为自己管理数据，而不是拥有全局范围。

TL; DR;

NO

实际上，理论上你可以在加载组件时加载数据，并在不需要时卸载它。然后你可以实现一些自动化的东西，但这不是通量模式的重点。

Vuex商店建筑在大型网站

2 个答案:

TL; DR;

NO