【VUE】3.vuex

一、Vuex 基本概念

1. 定义：
   • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2. 作用：
   • 解决多个组件间共享状态的问题。
   • 提供一种可预测的状态管理方式。

二、Vuex 核心概念

1. State：
   • 存放应用程序的原始数据状态，是 Vuex store 的核心部分。
   • 所有组件共享的数据中心，类似于 Vue 组件中的 data。
2. Getters：
   • 类似于 Vue 组件中的计算属性，用于从 state 中派生出一些状态。
   • 可以对 state 中的数据进行加工处理，如筛选、排序等。
3. Mutations：
   • 唯一允许更新 state 的方法，必须是同步函数。
   • 通过提交 mutation 来改变 state 的值，确保状态变更的可追踪性。
4. Actions：
   • 类似于 mutations，但主要用于处理异步操作或复杂的业务逻辑。
   • 可以提交 mutation 来改变 state，也可以包含多个 mutation 的提交。
5. Modules：
   • 将 store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。
   • 使得大型应用中的状态管理更加模块化和可扩展。

三、Vuex 使用步骤

1. 安装 Vuex：
   • 使用 npm 或 yarn 安装 Vuex，注意版本兼容性（Vuex 3 适用于 Vue 2，Vuex 4 适用于 Vue 3）。
2. 创建 Store：
   • 在项目中创建一个 store 目录，并在其中创建 index.js 文件。
   • 在 index.js 文件中，使用 Vuex 提供的 createStore 方法创建 Vuex 实例，并配置 state、getters、mutations、actions 和 modules。
3. 将 Store 挂载到 Vue 实例：
   • 在 main.js 或项目的入口文件中，引入 store，并将其挂载到 Vue 实例上。
4. 在组件中使用 Vuex：
   • 通过 this.$store 访问 store 实例。
   • 使用 this.$store.state 访问 state。
   • 使用 this.$store.commit 提交 mutation。
   • 使用 this.$store.dispatch 分发 action。
   • 使用 mapState、mapGetters、mapMutations 和 mapActions 辅助函数简化代码。

四、Vuex 常见问题

1. 为什么要在 Vue 中使用 Vuex？
   • 当多个组件需要共享状态时，使用 Vuex 可以集中管理这些状态，避免组件间直接通信的复杂性。
2. Vuex 和全局变量的区别？
   • Vuex 的状态是响应式的，当 state 发生变化时，依赖该状态的组件会自动更新。
   • Vuex 提供了严格的规则来变更状态，如只能通过 mutation 变更 state，使得状态变更更加可预测和可追踪。
3. 何时使用 Mutations 和 Actions？
   • 当需要同步更新 state 时，使用 Mutations。
   • 当需要处理异步操作或复杂的业务逻辑时，使用 Actions。
4. Vuex Modules 的作用？
   • 将 store 模块化，使得大型应用中的状态管理更加清晰和易于维护。

五、vuex模块化

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

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store