Vuex 基础
了解 Vuex 存储及集中式状态管理
Vuex 基础 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
为什么需要集中式状态
随着 Vue 应用不断增长，在多个组件之间共享数据会变得很困难。在深层嵌套的组件树中向下传递属性、向上触发事件非常脆弱。Vuex通过一个集中式 store 解决了这个问题，任何组件都可以以可预测的方式从中读取和写入数据。
唯一可信数据源
Vuex 遵循单向数据流。所有共享的应用状态都存放在一个称为 store 的位置。组件从 store 读取状态，并通过受控 API 请求更改，因此您始终知道数据的来源以及它的变化方式。
安装 Vuex
Vuex 4 是为 Vue 3 构建的版本。请使用您的包管理器安装它，然后创建 store 并将其注册到 app 中。
npm install vuex@4创建 store
使用 createStore 定义 store。state选项是一个返回初始响应式状态对象的函数。
import { createStore } from "vuex"
export const store = createStore({
state() {
return {
count: 0,
user: null
}
}
})注册 store
使用 app.use(store) 将 store 传入 app。这样，每个组件都可以通过 this.$store 使用它。
import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"
const app = createApp(App)
app.use(store)
app.mount("#app")state 属性
state对象保存应用数据。它具有响应性：当 state 发生变化时，使用它的组件都会自动重新渲染。您可以把它理解为整个 app 的 data()。
state() {
return {
todos: [],
isLoading: false,
theme: "light"
}
}在选项式 API 中访问 state
在组件内部，通过 this.$store.state访问 store。计算属性可以保持该值的响应性。
export default {
computed: {
count() {
return this.$store.state.count
}
}
}在模板中使用 state
通过计算属性公开 state 后，就可以像使用模板中的任何本地值一样使用它。
<template>
<p>Current count: {{ count }}</p>
</template>mapState 辅助函数
手动编写许多计算属性很重复。mapState辅助函数可以根据状态名称数组为您生成这些计算属性。
import { mapState } from "vuex"
export default {
computed: {
...mapState(["count", "user"])
}
}使用 mapState 重命名
向 mapState传入对象，可以重命名属性，或根据 state 计算派生值。
computed: {
...mapState({
total: "count",
userName: (state) => state.user ? state.user.name : "Guest"
})
}在组合式 API 中访问 state
使用组合式 API 时，在 setup内部调用 useStore()以获取 store 实例，然后通过计算属性读取 state。
import { computed } from "vue"
import { useStore } from "vuex"
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
return { count }
}
}快速检查
测试您对 Vuex 基础知识的理解。
回顾
Vuex 提供了一个集中式、响应式的 store，作为唯一可信数据源。您可以使用 createStore创建它，通过 app.use注册它，并通过计算属性或 mapState辅助函数读取 state。在组合式 API 中，您可以通过 useStore()访问 store。接下来，您将学习如何安全地实际更改 state。
常见问题解答
「Vuex 基础」课时是免费的吗？
是的 — 「Vuex 基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「Vuex 基础」这节课中我会学到什么？
了解 Vuex 存储及集中式状态管理 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「Vuex 基础」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。