Vue 状态管理：从Vuex到Pinia，Vue 3官方推荐的状态管理库深度解析

大家好，我是前端宝哥。

在编程界有句老话：“命名和缓存失效是世上两大难题。” 我得说，在现代Web应用的状态管理上，这难题得排第三！

今天，咱们来深挖一下Vue的状态管理之道，并介绍一个超直观的解决方案——Pinia。

Vue状态管理：那些坑和局限性

自Vue 2起，我们用data属性来定义组件的状态，就像这样：

<template>
  <div>{
   { user.name }}</div>
</template>

<script>
export default {
  data() {
    return { user: { name: 'John', age: 25 } };
  }
};
</script>

这就是所谓的 选项 API，在Vue 3中依然可用。Vue 3还带来了 组合式 API，它用reactive和ref等新招数来定义状态。用这新API，我们可以这样写组件脚本：

<script setup>
import { reactive } from 'vue'

const user = reactive({ name: 'John', age: 25 });
</script>

但如果要跨组件访问状态，比如在导航栏显示用户名，在个人资料页展示详细信息，这就尴尬了。通常，我们用props逐层传递，但层级一多，就得在每个组件里加props，不管用不用得上。这叫prop 穿透，真不推荐。

更新共享数据时，子组件不能直接改props，得发事件让父组件来更新，再传下去。这...感觉有点笨。

Vue 3的救星来了：组合式 API 让我们能在任何脚本里用ref和reactive，还能导出状态，整个应用都能用。

我们可以把这状态叫做存储 (store)。比如，创建个store/user.js：

import { reactive } from 'vue