Vuex核心 - 模块 module（进阶）创建拆分

module分模块

一、什么是 模块module

在Vuex中，模块（module）是用来组织和管理状态（state）、行为（actions）、变更（mutations）和获取器（getters）的一种方式。模块可以将相关的状态和操作集中到一个独立的命名空间中，以避免全局命名冲突，并且提供了一种结构化的方式来组织大型应用程序的状态管理。

每个模块都可以包含自己的状态、行为、变更和获取器。它可以通过模块的命名空间来访问这些内容。当在多个模块之间存在重复的功能或状态时，模块可以被复用或嵌套在其他模块中，从而实现更高级别的状态管理。

二、module的好处

使用模块的好处包括：

1. 命名空间：模块提供了一个命名空间，使得不同模块之间的状态和操作不会相互干扰，减少命名冲突的可能性。
2. 代码组织：模块可以将相关的状态和操作放在一起，使得代码更加清晰、易于维护和扩展。
3. 复用性：模块可以被复用，减少代码的重复编写，提高开发效率。
4. 嵌套：模块可以嵌套在其他模块中，形成层级结构，更好地组织和管理应用程序的状态。

在Vuex中，使用store对象的modules选项来注册和配置模块。每个模块可以拥有自己的state、actions、mutations和getters，并提供namespaced选项来指定是否开启命名空间。

三、模块创建-拆分

第一步：创建modules文件夹，里面放子模块（index.js 是主模块）

第二步 ：里面的模块都基于该框架形成一个子模块，将里面的方法暴露给主模块。

user子模块：

// 这是 user 子模块 (这里的数据都数据user子模块的)

// 创建vuex核心函数
const state = {
  userInfo: {
    name: 'zs',
    age: 18
  },
  score: 99
}
const mutations = {}
const actions = {}
const getters = {}

// 导出子模块中的、vuex核心函数
export default {
  state,
  mutations,
  actions,
  getters
}

setting模块：

// 这是 setting 子模块 (这里的数据都数据 setting 子模块的)

// 创建vuex核心函数
const state = {
  theme: 'light',
  desc: '测试'
}
const mutations = {}
const actions = {}
const getters = {}

// 导出子模块中的、vuex核心函数
export default {
  state,
  mutations,
  actions,
  getters
}

第三步： 主模块 index.js 导入 modules文件夹中的子模块，并且使用。

import user from './modules/user'
import setting from './modules/setting'


  // 5.modules  模块
  modules: {
    user,
    setting
  }