javascript - 大型网站中的 Vuex store 架构

Question

目前正在使用 Vue.js 构建一个大型网站，一直卡在 Vuex store 的架构中。

文件夹结构现在是这样的

.
├── 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 存储，所以其他的都是实际上没用。

因此，我的问题是:

Is it possible to create dynamic state object for each page. For example, in About page, only import Header.js and Photo.js, in Index page, only import Header.js and TimeStamp.js, and the structure would look similar like below.

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

Answer 1

单状态对象

it seems all module state need to be imported as a big SINGLE object

好吧，所有这些都作为单个对象管理。但是你当然知道可以根据需要返回碎片的 setter/getter ？

将商店模块放在一起非常容易

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

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

动态状态

Is it possible to create dynamic state object for each page

当然。

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

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

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

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

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

如何访问动态状态？

您的 getter 可以返回一个带有参数的函数，该参数用于“动态”选择状态切片(引用: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