javascript - 大型网站中的 Vuex 商店架构

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

绝对是的。

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

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

您可以在上面看到，我使用了 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)
  },

开发工具和动态

上面提到的插件用于增强 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