广州贸易网站北京网络营销顾问

1. 什么是状态管理

状态管理就是统一管理应用中的数据，让数据在多个组件之间共享和同步。

// 没有状态管理 - 数据分散在各个组件中
// 组件A
const user = ref({ name: '张三', age: 25 })// 组件B  
const user = ref({ name: '张三', age: 25 }) // 重复定义// 组件C
const user = ref({ name: '张三', age: 25 }) // 又是重复定义

// 有状态管理 - 数据统一管理
// stores/user.ts
export const useUserStore = defineStore('user', () => {const user = ref({ name: '张三', age: 25 })return { user }
})// 所有组件都使用同一个数据源
const userStore = useUserStore()

2. 解决的核心问题

2.1 数据共享问题

<!-- 父组件 -->
<template><div><UserProfile :user="user" /><UserSettings :user="user" /><UserPosts :user="user" /></div>
</template><script setup>
// 需要把数据一层层传递下去
const user = ref({ name: '张三', age: 25 })
</script><!-- 子组件 -->
<template><div><h1>{{ user.name }}</h1><p>{{ user.age }}岁</p></div>
</template><script setup>
// 需要定义 props 接收数据
const props = defineProps(['user'])
</script>

使用状态管理后：

<!-- 任何组件都可以直接访问用户数据 -->
<template><div><h1>{{ userStore.user.name }}</h1><p>{{ userStore.user.age }}岁</p></div>
</template><script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
</script>

2.2 数据同步问题

<!-- 组件A -->
<template><button @click="updateUser">更新用户</button>
</template><script setup>
const updateUser = () => {user.name = '李四' // 只更新了组件A的数据
}
</script><!-- 组件B -->
<template><div>{{ user.name }}</div> <!-- 还是显示"张三" -->
</template>

使用状态管理后：

<!-- 组件A -->
<script setup>
const userStore = useUserStore()
const updateUser = () => {userStore.updateUser({ name: '李四' }) // 全局更新
}
</script><!-- 组件B -->
<template><div>{{ userStore.user.name }}</div> <!-- 自动显示"李四" -->
</template>

3. 实际应用场景

3.1 用户登录状态

// stores/auth.ts
export const useAuthStore = defineStore('auth', () => {const user = ref(null)const token = ref('')const isLoggedIn = computed(() => !!token.value)const login = async (credentials) => {const response = await api.login(credentials)token.value = response.tokenuser.value = response.userlocalStorage.setItem('token', response.token)}const logout = () => {token.value = ''user.value = nulllocalStorage.removeItem('token')}return { user, token, isLoggedIn, login, logout }
})

在组件中使用：

<!-- 导航栏 -->
<template><nav><div v-if="authStore.isLoggedIn">欢迎，{{ authStore.user.name }}<button @click="authStore.logout">退出</button></div><div v-else><button @click="showLogin = true">登录</button></div></nav>
</template><script setup>
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
</script>

3.2 购物车功能

// stores/cart.ts
export const useCartStore = defineStore('cart', () => {const items = ref([])const total = computed(() => items.value.reduce((sum, item) => sum + item.price * item.quantity, 0))const addItem = (product) => {const existingItem = items.value.find(item => item.id === product.id)if (existingItem) {existingItem.quantity++} else {items.value.push({ ...product, quantity: 1 })}}const removeItem = (id) => {items.value = items.value.filter(item => item.id !== id)}return { items, total, addItem, removeItem }
})

在多个组件中使用：

<!-- 商品列表 -->
<template><div v-for="product in products" :key="product.id"><h3>{{ product.name }}</h3><p>¥{{ product.price }}</p><button @click="cartStore.addItem(product)">加入购物车</button></div>
</template><!-- 购物车 -->
<template><div><h2>购物车 ({{ cartStore.items.length }})</h2><div v-for="item in cartStore.items" :key="item.id">{{ item.name }} × {{ item.quantity }} = ¥{{ item.price * item.quantity }}<button @click="cartStore.removeItem(item.id)">删除</button></div><p>总计：¥{{ cartStore.total }}</p></div>
</template>

3.3 主题切换

// stores/theme.ts
export const useThemeStore = defineStore('theme', () => {const theme = ref('light')const toggleTheme = () => {theme.value = theme.value === 'light' ? 'dark' : 'light'document.documentElement.setAttribute('data-theme', theme.value)}return { theme, toggleTheme }
})

4. 状态管理的优势

4.1 数据集中管理

// 所有应用状态都在一个地方
const appState = {user: { name: '张三', age: 25 },cart: { items: [], total: 0 },theme: 'light',loading: false
}

4.2 数据可预测

// 状态变化都有明确的路径
const updateUser = (newUser) => {// 只能通过这个函数更新用户数据user.value = newUser
}

4.3 便于调试

// 可以追踪所有状态变化
const userStore = useUserStore()
console.log('当前用户:', userStore.user)
console.log('是否登录:', userStore.isLoggedIn)

4.4 代码复用

// 多个组件可以复用相同的状态逻辑
// 组件A
const { user, updateUser } = useUserStore()// 组件B  
const { user, updateUser } = useUserStore()

5. 什么时候需要状态管理

5.1 需要状态管理的情况

• ✅ 多个组件需要共享数据
• ✅ 数据需要在组件间同步
• ✅ 应用状态复杂，难以管理
• ✅ 需要持久化某些数据
• ✅ 需要调试状态变化

5.2 不需要状态管理的情况

• ❌ 简单的单页面应用
• ❌ 组件间没有数据共享
• ❌ 数据只在单个组件内使用
• ❌ 应用规模很小

6. 状态管理 vs 其他方案

6.1 Props 传递

<!-- 适合：简单的父子组件通信 -->
<Parent><Child :data="parentData" />
</Parent>

6.2 Event Bus

// 适合：简单的兄弟组件通信
import { mitt } from 'mitt'
const emitter = mitt()// 发送事件
emitter.emit('user-updated', newUser)// 监听事件
emitter.on('user-updated', (user) => {console.log('用户更新了:', user)
})

6.3 状态管理

// 适合：复杂应用，多组件共享数据
const userStore = useUserStore()

7. 总结

状态管理的核心作用是：

1. 统一数据源 - 避免数据重复和不一致
2. 简化组件通信 - 不需要层层传递 props
3. 提高代码可维护性 - 数据逻辑集中管理
4. 便于调试和测试 - 状态变化可追踪
5. 支持数据持久化 - 可以保存到本地存储

简单来说：状态管理就是让应用的数据管理更加有序、可预测、易维护。