集中管理共享状态

集中管理共享状态

Pinia 用来管理跨组件、跨页面共享的状态，例如用户信息、权限和主题。

适用场景

• 用户信息
• 权限菜单
• 购物车
• 主题设置

技术点总览

分批介绍

定义 store

defineStore 用来创建一个状态模块。

1export const useUserStore = defineStore('user', {
2  state: () => ({ info: null, token: '' })
3})

action 修改状态

action 适合封装修改状态和异步请求。

1actions: {
2  setUser(info) {
3    this.info = info
4  }
5}

组件中使用 store

组件里调用 store 后就能读取和修改共享状态。

1<script setup>
2const userStore = useUserStore()
3userStore.setUser({ name: 'Sakura' })
4</script>

使用建议

• 先把数据来源、状态归属和交互入口写清楚，再考虑抽象。
• 示例代码只保留核心写法，真实业务里还要补充 loading、error、empty 等状态。
• 如果一种写法让代码更绕，优先回到更直观、更容易维护的实现方式。

小结

集中管理共享状态 的重点不是记住某个 API，而是理解它解决的问题、适合的场景以及和其它技术点之间的关系。把每个小知识点拆开看，再组合到真实业务里，代码会更有规律，也更容易维护。