📢 鸿蒙专栏：想学鸿蒙的，冲
📢 C语言专栏：想学C语言的，冲
📢 VUE专栏：想学VUE的，冲这里
📢 CSS专栏：想学CSS的，冲这里
📢 Krpano专栏：想学VUE的，冲这里
🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！
目录
✨ 前言
Vuex的几个核心概念
Vuex工作原理
✨ 结语
✨ 前言
Vuex是一个专门为Vue.js设计的状态管理模式。它采用集中式存储管理应用程序的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
下面我们来对它的核心概念与工作原理进行详细分解：
Vuex的几个核心概念
- State:储存应用状态的数据源,是一个树形结构,只有通过mutation函数才能改变其状态。
- Getters: 对State的计算属性,类似Vue中的computed。
- Mutations: 改变State的唯一途径, mutation必须是同步函数。
- Actions: 用于提交Mutation来改变State,可以包含异步操作。
- Modules: 将State、Getters、Mutations和Actions分割到不同的module中以保持项目的结构化。
State
State是Vuex中的状态中心,存储着所有组件状态的数据。它是一个树形结构,只能通过mutation改变状态。
State提供了一个应用的“单一数据源”,所有共享状态都定义在这里, components只需要引入使用不需要担心状态不同步的问题。
// store.js
export default new Vuex.Store({
state: {
count: 0
}
})
// Component.vue
import { mapState } from 'vuex'
export default {
computed: mapState({
count: state => state.count
})
}Getters
Getters相当于store的计算属性,对State进行加工处理形成易于使用的新数据。
Getters接收state作为第一个参数,供其内部消费和处理,通过返回值暴露给外部。可以用来简化数据处理和实现缓存。
// store.js
export default new Vuex.Store({
getters: {
doubleCount: state => state.count * 2
}
})
// Component.vue
import { mapGetters } from 'vuex'
export default {
computed: mapGetters([
'doubleCount'
])
}Mutations
Mutations是改变State的唯一途径。
它接受state作为第一个参数,payload作为第二个参数。可以包含多个mutation函数,通过type区分不同的mutation。
必须是同步函数,通过提交mutation而非直接改变state来保证状态改变可追踪和调试。
// store.js
export default new Vuex.Store({
mutations: {
increment (state) {
state.count++
}
}
})
// Component.vue
methods: {
increment() {
this.$store.commit('increment')
}
}Actions
Actions用于处理业务逻辑,支持异步操作。
通过context.commit提交mutation来触发状态改变,而非直接改变state。
可以包含异步操作如 AJAX请求,可以用async/await简化异步流程。
// store.js
export default new Vuex.Store({
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})
// Component.vue
methods: {
incrementAsync() {
this.$store.dispatch('incrementAsync')
}
}Modules
Modules用于将状态、getters、actions、mutations分割到不同模块中。
每个模块都有自己的state、getters、actions、mutations,不同模块的状态独立维护。
有助于项目结构化,减少命名冲突。
// store.js
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})这样Vuex的每个部分如何协同工作会更加明确,希望对你进一步理解Vuex有帮助!可以根据这个框架来深入去实践和应用Vuex。
Vuex工作原理
- Vue组件通过dispatch方法触发Actions。
// Component.vue methods: { increment() { this.$store.dispatch('increment') } } - Actions 通过commit方法提交Mutations。
// store.js actions: { increment({ commit }) { commit('INCREMENT') } } - Mutations改变State中的数据。
mutations: { INCREMENT(state) { state.count++ } } - State数据的变化将触发所有依赖于它的组件的重新渲染。
// Component.vue computed: { count() { return this.$store.state.count } } - 可选步骤:组件可以通过getters从Store中获取特定的数据。
// Component.vue import { mapGetters } from 'vuex' computed: { ...mapGetters(['doubleCount']) }
为何要分离 Mutation 和 Action
- Action 可以包含异步操作,Mutation 只能是同步。
- 将状态改变隔离到 Mutation 中,便于追踪和调试。
- 分离业务逻辑 (Action)与状态变更 (Mutation) 使代码结构更清晰。
为何 Mutation 必须是同步
- 直接在 Action 中改状态,不能明确追踪状态变化。
- 很难追踪多个组件共享的状态变更。
- 调试工具无法捕捉每个状态变更,失败记录前后快照。
- 如果是异步操作,后续的改变可能基于之前的过时状态。
所以 Vuex 通过这种设计保证可追踪和可预测的状态管理,也使代码更结构化。这就是它的核心工作原理。
✨ 结语
Vuex通过集中化的状态管理,将组件的共享状态抽离出来,以一个全局单例模式管理。这使得状态变化可预测,避免了复杂的组件间通信,也使调试和维护变得简单。
其核心概念State、Getters、Mutations和Actions各司其职,但又相互配合,共同定义了一个清晰流程来改变和处理状态。这种模式提高了代码的结构化,也给予开发者更强的控制力。
深入理解Vuex的设计思想,可以让我们更好地运用它管理复杂应用的状态,构建健壮可维护的Vue应用程序。Vuex是一个值得深入学习和应用的重要框架和思想。
我们改日再会
