在
Vuex 中，**获取 `
state`
数据并保持响应式**是其核心特性之一。
Vuex 通过
Vue 的响应式系统，确保组件中对 `
state` 的引用是响应式的 —— 当 `
state` 发生变化时，使用它的组件会自动重新渲染。
下面详细说明如何正确地从
Vuex 获取 `
state` 并保证响应式
更新。
---
### ✅ 方法一：直接通过 `this.$store.
state` 访问（基础方式）
```javascript
// store.js
import { createStore } from '
vuex'
const store = createStore({
state: {
count: 0,
user: {
name: 'Alice',
age: 25
}
}
})
export default store
```
```
vue
<!-- Component.
vue -->
<template>
<div>
<p>当前计数：{{ count }}</p>
<p>用户姓名：{{ userName }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.
state.count
},
userName() {
return this.$store.
state.user.name
}
},
methods: {
increment() {
this.$store.
state.count++
// ⚠️
不推荐直接修改
state，应通过 mutation
}
}
}
</script>
```
> ✅ 响应式原理：由于 `
state` 是一个
Vue 可观测对象（reactive object），任何在 `computed` 中读取的字段都会建立依赖关系，当该字段变化时，
视图自动
更新。
---
### ✅ 方法二：使用 `
mapState` 辅助函数（推荐）
Vuex 提供了 `
mapState` 工具函数，可以更简洁地将 `
state` 映射到组件的计算属性中。
#### 使用 `
mapState` 的几种写法：
```javascript
import {
mapState } from '
vuex'
export default {
computed: {
// 数组形式（适用于
state 字段名与组件属性名相同）
...
mapState(['count', 'user']),
// 对象形式（可重命名）
...
mapState({
count:
state =>
state.count,
userName:
state =>
state.user.name,
userAge: 'user.age' // 支持路径字符串（仅限简单路径）
})
}
}
```
```
vue
<template>
<div>
<p>计数：{{ count }}</p>
<p>用户名：{{ userName }}</p>
</div>
</template>
```
> 💡 所有通过 `
mapState` 映射的计算属性依然是响应式的，因为底层仍然是访问 `$store.
state`。
---
### ✅ 方法三：结合 `setup()`（
Vue 3 + Composition API）
如果你使用的是 **
Vue 3 +
Vuex 4**，可以在 `setup()` 中使用 `useStore` 钩子：
```javascript
// store.js (
Vuex 4 for
Vue 3)
import { createStore } from '
vuex'
export default createStore({
state() {
return {
count: 0,
name: 'Bob'
}
},
mutations: {
increment(
state) {
state.count++
}
}
})
```
```
vue
<!--
Vue 3 Composition API -->
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<script>
import { computed } from '
vue'
import { useStore } from '
vuex'
export default {
setup() {
const store = useStore()
// 创建响应式
数据
const count = computed(() => store.
state.count)
const increment = () => {
store.commit('increment')
}
return {
count,
increment
}
}
}
</script>
```
> ✅ `computed(() => store.
state.xxx)` 确保了响应性。只要 `
state.count` 改变，`count` 就会
更新。
---
### 🔁 响应式注意事项
| 注意点 | 说明 |
|--------|------|
| ❌ 直接替换整个
state 对象 | 如 `this.$store.
state = new
State`
不会触发响应式
更新（应该避免） |
| ✅ 使用 Mutation 修改
state | 才能保证 devtools 跟踪和响应式同步 |
| 🚫
不要解构
state | 如 `const { count } = this.$store.
state` 会失去响应式 |
错误示例：
```js
const { count } = this.$store.
state
// 此时 count 是普通变量，
不再响应式！
```
正确做法始终是通过 `computed` 或 `
mapState` 引用。
---
### 🧩 深层响应式说明
Vuex 使用
Vue 的响应式机制（
Vue 2 中为 `Object.defineProperty`，
Vue 3 中为 `Proxy`），所以：
- 所有嵌套对象默认也是响应式的。
- 修改深层属性（如 `this.$store.
state.user.name = 'New'`）也能触发
更新。
- 但添加新属性时仍需注意（
Vue 2 需用 `
Vue.set` 或整体替换）。
---
### ✅ 总结：如何确保响应式获取
state？
| 方式 | 是否响应式 | 推荐程度 |
|------|------------|----------|
| `this.$store.
state.xxx` in `computed` | ✅ 是 | ⭐⭐⭐⭐ |
| `
mapState` 辅助函数 | ✅ 是 | ⭐⭐⭐⭐⭐ |
| `useStore().
state` + `computed()`（
Vue 3） | ✅ 是 | ⭐⭐⭐⭐⭐ |
| 解构赋值 `const { x } = $store.
state` | ❌ 否 | ❌ 禁止 |
---
扫一扫
2708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
