文章目录
- State
- Getter
- Mutations
- Actions
- Modules
- Namespacing
- Plugins
- Hot Module Replacement (HMR)
- 总结
Vuex 是 Vue.js 官方的
状态管理模式与
库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则
保证
状态以一种可预测的方式发生变化。
Vuex 的核心概念包括：
State
State 表示应用的状态或数据。
在 Vuex 中，所有的 state 都被集中存储在一个单一的 store 对象中。
这使得状态变得集中且容易管理，
同时确保了组件之间不会出现数据竞争。
Getter
Getters 可以理解为对 state 的衍生状态进行计算的函数。
它们类似于 Vue 中的 computed 属性，
但作用于全局状态。
Getters 可以接收其他 getters、state、mutations 和 actions 作为参数，
返回处理后的结果。
Mutations
Mutations 是提交给 store 的唯一方式来改变 state。
它们是同步执行的函数，接受 state 和 payload 参数。
Mutations 必须是同步的，
因为它们在 UI 渲染时需要保证是最新的状态。
Actions
Actions 类似于 mutations，不同之处在于：
Actions 包含任意异步操作。
Actions 不直接修改 state，而是通过 commit 调用 mutations 来改变 state。
Actions 可以包含其他 actions，允许执行一系列操作。
Modules
Modules 允许将 store 分割成模块化的结构，
每个模块可以有自己的 state、mutations、actions 和 getters。
这样可以让大型应用的 state 结构更加清晰和可维护。
Namespacing
Namespacing 是模块化带来的特性，
允许模块内部的 mutations 和 actions 在全局范围内被唯一标识。
这样可以避免命名冲突。
Plugins
Vuex 支持插件机制，
插件可以在 store 初始化时注入，
用于扩展 Vuex 的功能，
例如持久化状态到本地存储、日志记录等。
Hot Module Replacement (HMR)
Vuex 支持热模块替换，这意味着在开发过程中，
当 Vuex store 的代码发生改变时，
不需要重新加载整个页面，
store 的状态会被保留。
通过这些核心概念，Vuex 提供了一种高效、可预测的方式来管理复杂的 Vue 应用程序的状态。
总结
- state(store对象)
- mutations(改变state，同步)
- actions(改变state，异步，通过commit调用mutations)
- getter(计算state)
- modules(组织管理)
- namespacing
- plugins(利用插件持久化)
- HMR(热替换)
