2

目前用 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存储，所以其他所有状态实际上都没用。

因此，我的问题是：

是否可以为每个页面创建动态状态对象。例如，在 About 页面中，仅导入Header.jsand Photo.js，在 Index 页面中，仅导入Header.jsand TimeStamp.js，其结构如下所示。

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

2 回答 2

3

单状态对象

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

好吧，这一切都作为一个对象进行管理。但是你当然知道 getter 可以根据需要返回碎片吗？

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

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

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


动态

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

绝对地。

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

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

你可以在上面看到，我使用了一个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
于 2017-11-24T04:51:58.417 回答
1

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

TL;博士;

不

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

于 2017-11-24T03:41:22.297 回答