vue基础（第四章 Pinia）

浅水壁虎2026-08-12 16:14

1:Pinia 西班牙语：菠萝

1.1:Pinia是什么？

Pinia 是 Vue 官方新一代状态统一管理库，当数据需要在多个不相关的组件间共享的时候，需要使用Pinia，类似 Redis 集中缓存。专门为vue2和vue3设计，是Vuex 的替代方案。Vue 3 官方已推荐新项目直接使用 Pinia，不再主推 Vuex。

我们在上一章节的路由器中学习了组件之间传递数据，比如多层嵌套、兄弟组件、跨页面路由之间，数据传递会非常麻烦。很麻烦，但是pinia可以完美的结局这个问题

👉 Pinia：把公共数据放到全局仓库 (store) ，任意组件都可以直接读取、修改。

F5 刷新页面：Pinia 清空，前端重新请求接口，再回填 Pinia。

补充：如果想让 Pinia 拥有类似 redis "持久化" 效果，前端可以搭配 pinia‑plugin‑persistedstate，把数据存到浏览器localStorage。localStorage 相当于浏览器本地小磁盘，但依然只属于这台电脑这个浏览器，别的设备访问不到，和后端 Redis 不是一回事。

1.2:有什么作用

管理跨组件共享全局状态

场景举例（工业后台 / MES 系统经常用到）：

  1. 用户登录信息、token、角色权限、菜单列表
  2. 页面全局配置、筛选条件缓存
  3. 多个页面共享的设备列表、工单筛选参数
  4. 弹窗全局状态、消息通知

如果不用状态库：组件之间多层传参（props 层层传递），代码耦合严重； 使用 Pinia：任意组件直接读取 / 修改全局状态

1.3:Pinia 对比 Vuex 核心优势（面试必说）

移除了 Mutation Vuex：修改 state 必须走 mutation（同步）、action 处理异步，模板代码繁琐 Pinia：可以直接修改 state；异步逻辑写在 action 里，结构简单。

没有嵌套 modules Vuex 模块嵌套 store.user.token； Pinia 每个 store 是独立文件，扁平结构，导入即用，不用命名空间 namespaced。

原生 TypeScript 支持极好 类型自动推导，不需要额外复杂类型声明，非常适合 <script setup> + TS 项目。

代码更简洁，样板代码极少 不需要 commit、dispatch，降低学习成本。

支持组件外部调用 store 路由守卫、axios 拦截器里可以直接引入 store 操作状态（Vuex 也能实现，但 Pinia 更顺畅）。

Devtools 调试友好，支持时间旅行调试。

1.4:Pinia的核心状态

Pinia 三大核心概念

  1. state：状态，存放共享数据（等同于 Vuex 的 state）
  2. gettters：派生状态，相当于计算属性，有缓存
  3. actions：修改状态方法，支持同步、异步（替代 Vuex mutation + action）

2:实战开始

2.1:使用pinia之前，组件count.vue

html 复制代码 
<template>
    <div>
        <h1>pinia的person组件</h1>
        <h2>计数器：{{ count }}</h2>
        名字：<input type="text" v-model="name">{{ name }}
        <hr>

        <!-- v-model双向数据绑定。影响value属性  -->
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">+数字</button>
        <button @click="minus">-数字</button>


    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';

let name = ref("张三");
console.log(name);

// 计数器方法
let count = ref(0);
let n = ref(1);
function add() {
    count.value += n.value;

}

function minus() {
    count.value -= n.value;
}


</script>

<style></style>

2.2:使用pinia做状态集中管理

1:首先安装pinia

html 复制代码 
npm install pinia

2:在main.ts中使用pinia

TypeScript 复制代码 
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
//创建pinia
const pinia = createPinia()
//使用pinia
app.use(pinia)

app.mount('#app')

2.3:新建store下的count.ts 操作pinia

TypeScript 复制代码 
import { defineStore } from "pinia";

//定义仓库
const userCountStore = defineStore("count", {
  //状态 state，存放共享数据（等同于 Vuex 的 state）
  state() {
    //返回数据
    return {
      name:"张三",
      count: 0,
      n: 1,
    };
  },

  // Actions：修改状态的方法，支持同步/异步（替代Vuex mutation+action）
  actions: {
    add2():void {
      this.count += this.n;
    },
    minus2() {
      this.count -= this.n;
    },
    // 异步示例
    async changeName(newName: string) {
      // 可以在这里请求后端接口
      this.name = newName;
    },
  },
});

//导出仓库 默认单利，多组件共享
//export default userCountStore;
export { userCountStore };

2.4:count.vue组件使用pinia

html 复制代码 
<template>
    <div>
        <h1>pinia的person组件</h1>
        <h2>计数器：{{ count }}</h2>
        名字：<input type="text" v-model="name">{{ name }}
        <hr>

        <!-- v-model双向数据绑定。影响value属性  -->
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">+数字</button>
        <button @click="minus">-数字</button>
        <hr>
        <h1>使用pinia</h1>

        <h2>计数器：{{ countStore.count }}</h2>



        <!-- v-model双向数据绑定。影响value属性  -->
        <select v-model.number="countStore.n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add1">+数字</button>
        <button @click="minus1">-数字</button>

        <hr>
        <button @click="add11">+数字</button>
        <button @click="minus11">-数字</button>

        <hr>

    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { userCountStore } from '../store/count'

let name = ref("张三");
console.log(name);

//1:不实用pinia 计数器方法
let count = ref(0);
let n = ref(1);
function add() {
    count.value += n.value;

}

function minus() {
    count.value -= n.value;
}

//2:使用pinia, 得到单利的countStore
let countStore = userCountStore()
function add1() {
    countStore.count += countStore.n;
}

function minus1() {
    countStore.count -= countStore.n;
}
function add11() {
    //通过仓库调用方法
    countStore.add2();
}
function minus11() {
    //通过仓库调用方法
    countStore.minus2();
}

</script>

<style></style>

2.5:storeToRefs

storeToRefs 是 Pinia 提供的工具函数，专门用来安全解构 Store 中的 state、getter，保证解构出来的变量依旧保留响应式。

html 复制代码 
<template>
    <div>
        <h1>pinia的person组件</h1>
        <h2>计数器：{{ count }}</h2>
        名字：<input type="text" v-model="name">{{ name }}
        <hr>

        <!-- v-model双向数据绑定。影响value属性 
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">+数字</button>
        <button @click="minus">-数字</button> -->
        <hr>
        <h1>使用pinia</h1>

        <h2>计数器：{{ count }}</h2>
        <!-- v-model双向数据绑定。影响value属性  -->
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add1">+数字</button>
        <button @click="minus1">-数字</button>

        <hr>
        <button @click="add11">+数字</button>
        <button @click="countStore.minus2">-数字</button>

        <hr>

    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { userCountStore } from '../store/count'
import { storeToRefs } from 'pinia';

let name = ref("张三");
console.log(name);

// //1:不实用pinia 计数器方法
// let count = ref(0);
// let n = ref(1);
// function add() {
//     count.value += n.value;

// }

// function minus() {
//     count.value -= n.value;
// }

//2:使用pinia, 得到单利的countStore
let countStore = userCountStore()
//storeToRefs结构才能响应式 
let {count,n}=storeToRefs(countStore);
//这两个对象也有了响应式
function add1() {
    countStore.count += countStore.n;
}

function minus1() {
    countStore.count -= countStore.n;
}
function add11() {
    //通过仓库调用方法
    countStore.add2();
}
function minus11() {
    //通过仓库调用方法
    countStore.minus2();
}

</script>

<style></style>

2.6:pinia持久话，因为页面刷新数据会丢失

1:安装持久化插件

html 复制代码 
npm install pinia-plugin-persistedstate

2:main.ts 注册插件

TypeScript 复制代码 
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

3:仓库开启持久化：

TypeScript 复制代码 
export const usePersonStore = defineStore('person', {
  state: () => ({...}),
  getters:{},
  actions:{},
  persist: true // 开启持久化
})

3:案例

相关推荐
传人once7 分钟前
企业官网静态页基础结构如何搭
javascript·css
桔筐11 分钟前
Vue中DOM的data-*自定义属性(dataset)与Vue data响应式变量区别详解
前端·javascript·vue.js
damoluomu17 分钟前
静态站点生成器怎么选：Node.js 生态里常用的五个（番外一）
javascript·css·typescript·node.js·html
小马过河R30 分钟前
EdgeOne深度解析：从原理、适用场景到COS接入的技术逻辑
java·开发语言·前端·spring·cos
ZoeLandia1 小时前
TypeScript 04：类型断言与类型守卫
开发语言·前端·typescript
guzicheng19901 小时前
webpack 安装笔记：全局 vs 本地，以及一个 PATH 环境变量的坑
前端·webpack
西索斯coding1 小时前
Claude Code 工具调用返回空怎么办？claude-opus-5.5 的 input_schema 校验踩坑记录与修复方案
服务器·前端·javascript·ai
疯狂敲代码的老刘1 小时前
MarvellousSuspender浏览器扩展：1.4K星开源标签页冻结神器，Chrome吃内存终结者的干净复活版
前端·chrome
码上上班1 小时前
shell 脚本知识点总结
前端·chrome
程序员Sunday1 小时前
Flex 和 Grid 有什么区别？一维布局、二维布局怎么选？
前端·css·面试
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06如何新建文件夹？ 电脑新建文件夹的4种方法07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08Telegram APK 下载安装完整指南 — 2026年最新09几个好用的ip纯净度检测网站10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新