pinia从定义到运用

Pinia 是 Vue 官方推荐的新一代状态管理库 ,专为 Vue3 设计,用来替代 Vuex。它以"轻量、直观、TypeScript 友好"著称,核心只有 state(数据)getters(计算值)actions(方法) 三个概念。

一、Pinia 是什么

  1. 定义:一个"全局数据仓库",跨组件/页面共享状态,与组件树解耦

  2. 与 Vuex 对比

  • 去掉 Mutation,同步异步都写在 actions 里。
  • 无需嵌套模块,每个 store 天然独立
  • 体积 ≈ 1 kB;支持 Vue2 / 3 和 SSR。
  • 配合 TypeScript 类型推导极佳

二、安装与启动

js 复制代码
# npm
npm i pinia
# main.ts
import { createPinia } from 'pinia'
app.use(createPinia())

三、创建 Store(两种语法)

  1. Option 风格(类 Vuex)
ts 复制代码
// src/stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2
  },
  actions: {
    increment() { this.count++ },
    async asyncAdd(n: number) {
      await delay(500)
      this.count += n
    }
  }
})
  1. Setup 风格(Composition API)
ts 复制代码
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
})

四、在组件里使用

vue 复制代码
<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const store = useCounterStore()
// 保持响应式解构
const { count, double } = storeToRefs(store)
// 方法直接解构即可
const { increment, asyncAdd } = store
</script>

<template>
  <p>{{ count }} / {{ double }}</p>
  <button @click="increment">+1</button>
  <button @click="asyncAdd(5)">async +5</button>
</template>

五、操作 state 的常见姿势

需求 写法示例(在组件内)
直接改 store.count = 10
批量改 store.$patch({ count: 10, msg:'ok' }) 或传入函数
整体替换 store.$state = { count: 0, ... }
重置为初始值 store.$reset()

六、数据持久化(刷新不丢)

css 复制代码
npm i pinia-plugin-persistedstate
TS 复制代码
// main.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)

// store 里打开开关
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  persist: true          // 默认存在 localStorage
})

七、调试与 DevTools

  • 安装 Vue DevTools 6+ 即可看到所有 store 的实时值、调用栈。
  • 生产环境默认关闭,可手动开启 pinia.use(devtools)

八、小结(记住 3 句话)

  1. "全局变量"放 state,需要缓存的计算值放 getters,改数据全写 actions。
  2. 组件里 storeToRefs 保住响应式,方法直接解构。
  3. 想持久化就装 pinia-plugin-persistedstate,一行 persist: true 搞定。
相关推荐
lang201509288 分钟前
Spring远程调用与Web服务全解析
java·前端·spring
Sheldon一蓑烟雨任平生39 分钟前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
listhi5202 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck2 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
一点一木2 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊3 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost3 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
Sheldon一蓑烟雨任平生3 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
BestAns3 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年4 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化