各位观众老爷们，早上好！我是你们的老朋友，Bug Slayer。今天呢，咱们不聊Bug，来聊聊Vuex这个Vue应用的状态管理神器。别害怕“状态管理”这个词，听起来高大上，其实它就是帮你更好地管理你应用的数据，让数据流向更清晰，更可控，debug起来更容易，头发也能多保住几根。
咱们今天就用最接地气的语言，把Vuex的核心概念一个个扒个精光，让各位以后在Vue项目里，也能玩转Vuex，成为数据流动的掌控者！
开场白：为啥我们需要Vuex？
在小型Vue应用里，组件之间的数据传递可能还能勉强用props和事件搞定。但是，当你的应用越来越复杂，组件越来越多，组件之间的关系错综复杂，数据传递就会变成一团乱麻。
想象一下，你需要在多个组件里共享同一个数据，比如用户登录状态。如果不用Vuex，你就需要一层层地通过props把数据传递下去，或者用全局事件总线（Event Bus）来传递。这两种方法都有各自的缺点：
- Props传递： 代码冗余，组件耦合度高，维护困难。想象一下，如果一个组件的父组件的父组件的父组件需要改变这个数据，你需要一路修改props的定义，简直是噩梦。
- Event Bus： 数据流向不清晰，难以追踪，容易出现意外的副作用。你不知道哪个组件发起了这个事件，也不知道哪个组件监听了这个事件，debug起来简直是大海捞针。
这时候，Vuex就闪亮登场了！它可以把应用的所有组件的共享状态集中存储在一个地方，也就是store里。组件可以通过特定的方式访问和修改store里的数据，从而实现数据的集中管理。
核心概念一：State（状态）
State是Vuex的核心，它就是你的应用数据的“集中营”。你可以把应用中需要共享的数据都放在state里。
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
userInfo: {
name: 'Bug Slayer',
age: 18 // 永远18岁！
}
}
})
export default store在这个例子里，我们定义了一个store，它有两个state：count和userInfo。count是一个数字，userInfo是一个对象，包含了用户的姓名和年龄。
如何在组件中使用state？
你可以通过this.$store.state来访问state里的数据。
<template>
<div>
<p>Count: {{ $store.state.count }}</p>
<p>Name: {{ $store.state.userInfo.name }}</p>
<p>Age: {{ $store.state.userInfo.age }}</p>
</div>
</template>但是，直接使用this.$store.state会使组件与Vuex store紧密耦合，不利于组件的复用和测试。所以，Vuex提供了mapState辅助函数，可以让你更方便地访问state里的数据。
<template>
<div>
<p>Count: {{ count }}</p>
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
count: state => state.count,
name: state => state.userInfo.name,
age: state => state.userInfo.age
})
}
}
</script>或者更简洁的方式，如果state的键名和组件的计算属性名相同，可以省略函数：
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState([
'count',
'name',
'age'
])
}
}
</script>mapState会将store里的state映射到组件的计算属性里，这样你就可以像访问组件自身的数据一样访问state里的数据了。
核心概念二：Getters（获取器）
Getters可以理解为state的“计算属性”。它可以根据state里的数据计算出新的数据。
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
userInfo: {
name: 'Bug Slayer',
age: 18
}
},
getters: {
doubleCount: state => state.count * 2,
greeting: state => `Hello, ${state.userInfo.name}!`
isAdult: state => state.userInfo.age >= 18
}
})
export default store在这个例子里，我们定义了三个getter：doubleCount、greeting和isAdult。doubleCount会返回count的两倍，greeting会返回一个问候语，isAdult会返回一个布尔值，表示用户是否成年。
如何在组件中使用getter？
你可以通过this.$store.getters来访问getter。
<template>
<div>
<p>Double Count: {{ $store.getters.doubleCount }}</p>
<p>Greeting: {{ $store.getters.greeting }}</p>
<p>Is Adult: {{ $store.getters.isAdult }}</p>
</div>
</template>同样，Vuex也提供了mapGetters辅助函数，可以让你更方便地访问getter。
<template>
<div>
<p>Double Count: {{ doubleCount }}</p>
<p>Greeting: {{ greeting }}</p>
<p>Is Adult: {{ isAdult }}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'doubleCount',
'greeting',
'isAdult'
])
}
}
</script>Getter的优势：
- 缓存： Getter的结果会被缓存，只有当依赖的state发生变化时，才会重新计算。
- 复用： Getter可以在多个组件里复用，避免重复计算。
- 可测试性： Getter很容易进行单元测试。
核心概念三：Mutations（变更）
Mutations是修改state的唯一方法。它类似于事件，每个mutation都有一个名称和一个回调函数。回调函数接受state作为第一个参数，以及一个可选的payload（载荷）作为第二个参数。
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
userInfo: {
name: 'Bug Slayer',
age: 18
}
},
mutations: {
increment (state) {
state.count++
},
decrement (state) {
state.count--
},
updateName (state, newName) {
state.userInfo.name = newName
},
setAge (state, payload) { //payload 可以是一个对象，包含多个参数
state.userInfo.age = payload.age
}
}
})
export default store在这个例子里，我们定义了四个mutation：increment、decrement、updateName 和 setAge。increment会使count加1，decrement会使count减1，updateName会更新userInfo.name，setAge会更新userInfo.age。
如何提交mutation？
你可以通过this.$store.commit来提交mutation。
<template>
<div>
<p>Count: {{ $store.state.count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
<button @click="updateName">Update Name</button>
<button @click="setAge">Set Age</button>
</div>
</template>
<script>
export default {
methods: {
increment () {
this.$store.commit('increment')
},
decrement () {
this.$store.commit('decrement')
},
updateName () {
this.$store.commit('updateName', 'New Name')
},
setAge () {
this.$store.commit('setAge', { age: 25 })
}
}
}
</script>同样，Vuex也提供了mapMutations辅助函数，可以让你更方便地提交mutation。
<template>
<div>
<p>Count: {{ $store.state.count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
<button @click="updateName">Update Name</button>
<button @click="setAge">Set Age</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'increment',
'decrement',
'updateName',
'setAge'
])
}
}
</script>为什么必须通过mutation来修改state？
因为Vuex需要追踪state的变化，以便进行调试和状态回溯。如果直接修改state，Vuex就无法追踪到这些变化，就会导致一些难以预料的问题。
Mutations必须是同步的！
这是非常重要的一点。mutation的回调函数必须是同步的，这意味着你不能在mutation里执行异步操作，比如发送Ajax请求。这是因为异步操作会导致Vuex无法追踪到state的变化。
核心概念四：Actions（动作）
Actions用于处理异步操作，比如发送Ajax请求。它类似于mutation，每个action都有一个名称和一个回调函数。回调函数接受一个context对象作为第一个参数，以及一个可选的payload（载荷）作为第二个参数。context对象包含以下属性：
state：当前stategetters：当前getterscommit：提交mutation的方法dispatch：分发action的方法rootState：根state（如果使用了modules）rootGetters：根getters（如果使用了modules）
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios' // 引入axios
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
userInfo: {
name: 'Bug Slayer',
age: 18
},
posts: []
},
mutations: {
increment (state) {
state.count++
},
decrement (state) {
state.count--
},
updateName (state, newName) {
state.userInfo.name = newName
},
setPosts (state, posts) {
state.posts = posts
}
},
actions: {
async fetchPosts ({ commit }) {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
commit('setPosts', response.data)
} catch (error) {
console.error('Failed to fetch posts:', error)
}
},
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})
export default store在这个例子里，我们定义了两个action：fetchPosts和incrementAsync。fetchPosts会发送一个Ajax请求，获取文章列表，然后提交setPosts mutation来更新state。incrementAsync会在1秒后提交increment mutation。
如何分发action？
你可以通过this.$store.dispatch来分发action。
<template>
<div>
<p>Count: {{ $store.state.count }}</p>
<button @click="incrementAsync">Increment Async</button>
<button @click="fetchPosts">Fetch Posts</button>
<ul>
<li v-for="post in $store.state.posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>
<script>
export default {
methods: {
incrementAsync () {
this.$store.dispatch('incrementAsync')
},
fetchPosts () {
this.$store.dispatch('fetchPosts')
}
}
}
</script>同样，Vuex也提供了mapActions辅助函数，可以让你更方便地分发action。
<template>
<div>
<p>Count: {{ $store.state.count }}</p>
<button @click="incrementAsync">Increment Async</button>
<button @click="fetchPosts">Fetch Posts</button>
<ul>
<li v-for="post in $store.state.posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([
'incrementAsync',
'fetchPosts'
])
}
}
</script>Actions的优势：
- 处理异步操作： Actions可以处理异步操作，比如发送Ajax请求。
- 提交多个mutation： Actions可以提交多个mutation，从而实现更复杂的状态更新逻辑。
- 分发其他action： Actions可以分发其他action，从而实现更复杂的业务流程。
核心概念五：Modules（模块）
当你的应用变得越来越复杂，store也会变得越来越庞大。为了更好地组织代码，你可以把store分割成多个modules。每个module都有自己的state、getters、mutations和actions。
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
},
getters: {
doubleCount: state => state.count * 2
}
}
const moduleB = {
state: () => ({
message: 'Hello from Module B'
}),
mutations: {
setMessage (state, newMessage) {
state.message = newMessage
}
},
actions: {
updateMessage ({ commit }, newMessage) {
commit('setMessage', newMessage)
}
},
getters: {
upperCaseMessage: state => state.message.toUpperCase()
}
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
export default store在这个例子里，我们定义了两个module：moduleA和moduleB。moduleA有一个count state，moduleB有一个message state。
如何在组件中使用modules？
你可以通过this.$store.state.moduleName来访问module的state。
<template>
<div>
<p>Module A Count: {{ $store.state.a.count }}</p>
<p>Module B Message: {{ $store.state.b.message }}</p>
</div>
</template>你可以通过this.$store.getters['moduleName/getterName']来访问module的getter。
<template>
<div>
<p>Module A Double Count: {{ $store.getters['a/doubleCount'] }}</p>
<p>Module B Uppercase Message: {{ $store.getters['b/upperCaseMessage'] }}</p>
</div>
</template>你可以通过this.$store.commit('moduleName/mutationName')来提交module的mutation。
<template>
<div>
<button @click="incrementA">Increment A</button>
<button @click="updateMessageB">Update Message B</button>
</div>
</template>
<script>
export default {
methods: {
incrementA () {
this.$store.commit('a/increment')
},
updateMessageB () {
this.$store.commit('b/setMessage', 'New Message from Component')
}
}
}
</script>你可以通过this.$store.dispatch('moduleName/actionName')来分发module的action。
<template>
<div>
<button @click="incrementAAsync">Increment A Async</button>
<button @click="updateMessageBAsync">Update Message B Async</button>
</div>
</template>
<script>
export default {
methods: {
incrementAAsync () {
this.$store.dispatch('a/incrementAsync')
},
updateMessageBAsync () {
this.$store.dispatch('b/updateMessage', 'New Message from Component Async')
}
}
}
</script>命名空间（Namespaces）
为了避免不同module之间的命名冲突，你可以给module添加namespaced: true选项。
const moduleA = {
namespaced: true,
state: () => ({
count: 0
}),
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
},
getters: {
doubleCount: state => state.count * 2
}
}如果module启用了命名空间，你需要这样访问module的state、getter、mutation和action：
this.$store.state.a.count(State 访问方式不变)this.$store.getters['a/doubleCount']this.$store.commit('a/increment')this.$store.dispatch('a/incrementAsync')
并且，在使用mapState、mapGetters、mapMutations和mapActions时，也需要指定命名空间。
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState('a', ['count'])
},
methods: {
...mapMutations('a', ['increment'])
}
}
</script>或者使用 createNamespacedHelpers 辅助函数：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations } = createNamespacedHelpers('a')
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapMutations(['increment'])
}
}
</script>Vuex 数据流机制总结
最后，让我们用一张表格来总结一下Vuex的数据流机制：
| 步骤 | 操作 | 触发者 | 作用 |
|---|---|---|---|
| 1 | 组件触发 Action | 组件 | 处理异步操作，可以提交多个 Mutation，也可以分发其他 Action |
| 2 | Action 提交 Mutation | Action | 修改 State 的唯一方式，必须是同步的 |
| 3 | Mutation 修改 State | Mutation | 真正修改 State 的数据 |
| 4 | State 变化 | Vuex | 触发组件的重新渲染，更新视图 |
| 5 | Getters 获取数据 | 组件 | 从 State 中派生出新的数据，具有缓存功能 |
结束语
好了，今天的Vuex讲座就到这里了。希望通过今天的讲解，大家对Vuex的核心概念和数据流机制有了更深入的理解。记住，Vuex不是万能的，只有在你的应用需要集中管理状态时，它才能发挥最大的作用。
下次再见！祝各位早日成为Vuex大师，不再为数据流动而烦恼！