🚩 Vuex 模式：智能模块注册

Vue 体验：⚫️⚫️⚫️⚫️⚪️
Vuex 体验：⚫️⚫️⚫️⚫️⚫️

你有没有尝试过管理你的应用程序状态？
大型应用程序的复杂性通常会不断增长，因为多个状态分散在多个组件中，并且它们之间需要交互。因此，Vue 提供了Vuex，但正如官方文档所述：

Vuex 使用单状态树，应用程序的所有状态都包含在一个大对象中。然而，随着应用程序规模的增长，存储可能会变得非常臃肿。

为了实现这一点，Vuex 允许我们将 store 划分为模块。每个模块可以包含自己的状态、变更、操作、getter，甚至嵌套模块。

我想你已经感到困惑了，所以让我们开始讨论代码。

# This is a classic store structure with modules
├── index.html
├── main.js
├── components
└── store
    ├── index.js    # where we assemble modules and export the store
    └── modules
        ├── auth.js
        ├── posts.js
        └── comments.js

如您所见，我们有一个包含的存储文件夹index.js和一个名为的子文件夹modules，其中包含所有模块。但是模块注册可能会变得繁琐。
index.js在store/

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import posts from './modules/posts'
import comments from './modules/comments'
// ...

Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        auth,
        posts,
        comments,
        // ...
    }
})

Vuex 模块的示例脚手架。

export default {
  namespaced: true,
  state: {},
  getters: {},
  mutations: {},
  actions: {}
}

这是注册模块的标准方法。如果你知道命名空间是什么，那就继续吧。

默认情况下，模块内的操作、突变和 getter 仍然注册在全局命名空间下——这允许多个模块对相同的突变/操作类型做出反应。
如果您希望模块更加独立或可复用，可以使用以下命令将其标记为命名空间namespaced: true

让我们看看 Chris Fritz（Vue 核心成员）在 VueConf 中提到的模块注册。

🚩 首先，让我们添加一个index.js文件store/modules/

# This is our store structure with modules
├── index.html
├── main.js
├── components
└── store
    ├── index.js      # where we assemble modules and export the store
    └── modules
        ├── index.js  # this is the js file that solves the problem
        ├── auth.js
        ├── posts.js
        └── comments.js

🚩然后让我们修改index.js一下store/modules/index.js

import camelCase from 'lodash/camelCase'
// Storing in variable a context with all files in this folder
// ending with `.js`.
const requireModule = require.context('.', false, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
    if (fileName === './index.js') return
    // filter fullstops and extension 
  // and return a camel-case name for the file
    const moduleName = camelCase(
        fileName.replace(/(\.\/|\.js)/g, '')
    )
  // create a dynamic object with all modules
    modules[moduleName] = {
    // add namespace here
        namespaced: true,
        ...requireModule(fileName).default
    // if you have exported the object with name in the module `js` file
    // e.g., export const name = {};
    // uncomment this line and comment the above
        // ...requireModule(fileName)[moduleName]
    }
})
export default modules

🚩 让我们从每个模块 js 文件中删除命名空间。

// export const name = { if you want to export an object with name
export default {
  // namespaced: true,   delete this line 
    state: {},
    getters: {},
    mutations: {},
    actions: {}
}

🚩 最后，上面的代码（我们必须导入所有模块）可以更改为
index.js：store/

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'

Vue.use(Vuex)
export default new Vuex.Store({
    modules
})

我认为我们已经完成了一个“自动化”系统，它包含了模块文件夹中的所有文件。代码更加智能、简洁。

直到下一次...编码愉快！

文章来源：https://dev.to/nkoik/-vuex-pattern-smart-module-registration-15gc