Pinia 和 Vuex 有何差异?
先理解原理和示例,再练习完整口述与追问。
回答要点
Pinia 通过 store 组织 state、getters、actions,不要求 Vuex 式 mutations 层;可使用 Options Store 或 Setup Store。state / getter 解构通常通过 storeToRefs 保留响应式,actions 可直接解构。
原理拆解
Vuex 强调 state/getters/mutations/actions 的分工;Pinia 使用 store 的 state、getters 和 actions,允许通过其明确 API 修改状态,不再要求单独 mutation 层。两者都可以组织共享状态,但选择应结合 Vue 版本、插件、SSR 与维护成本。Pinia 的具体主版本是否支持 Vue2,要查兼容表,不能因为早期支持就默认最新版也支持。
示例与推演
Vuex 中异步 loadUser action 请求后 commit setUser;Pinia action 可以请求后设置 this.user。解构 store 的普通原始值可能丢失响应关联,Pinia 可按适用版本使用 storeToRefs,方法则按其绑定规则使用。多个业务域可拆成小 store,并明确哪个 store 拥有事实数据,避免交叉覆盖同一个列表。
易错点
状态库不会自动处理业务竞态、权限与持久化安全。SSR 每个请求应有独立 store 实例;不为局部弹窗引入全局状态,也不为替换一个模块就大迁移。
参考回答可直接练习口述
Pinia 用 store 定义状态、派生值和 actions,没有 Vuex 必须通过 mutations 的那一层约定,actions 可以同步或异步。Options Store 和 Setup Store 的组织方式不同,但都要明确状态边界。读取状态和 getter 时可通过 storeToRefs 解构保留响应关系;方法通常可以直接解构使用。
面试官可能继续问追问与完整解答展开收起
追问
为什么直接解构 store 的值不更新?Setup Store 如何重置?SSR 与持久化怎么隔离?Pinia 官方核心概念、版本支持说明
追问回答
直接解构基本值会拿到当时快照,storeToRefs 才保留关联。Options Store 提供 $reset,Setup Store 通常自己定义重置逻辑。SSR 每个请求独立创建 Pinia;持久化只保存必要字段,处理版本与退出清理。Pinia 3 已不支持 Vue2,旧 Vue2 项目不能直接套用当前 Pinia 版本。