当前位置：首页 > news >正文

Vue3组件间通信——pinia

news 2025/11/3 9:39:40

pinia简介：

pinia是一项vue官方推荐的组件间通信方式，适用于任意组件之间，实现数据的共享。基本功能类似于vuex，但相较于vuex，pinia适用不会产生偏离vue的感觉，存储更为直观。
在vue3里面pinia就是vuex的继任者。

pinia的安装和配置：

Pinia 是 Vue 的一个状态管理插件,所有要先安装第三方包，然后进行配置才能使用：

1、安装：

npm install pinia

2、main.ts中的配置：

import { createApp } from 'vue'
import App from './App.vue'// 引入pinia
import {createPinia} from 'pinia'// 创建pinia实例
let pinia = createPinia()
const app = createApp(App)// 使用pinia
app.use(pinia)
app.mount('#app')

pinia的基本使用：

pinia的基本使用流程：对于每一个用到了共享数据的.vue组件，就创建一个对应的存储文件到src/store目录下，如 button.vue组件定义了共享的数据 btnMsg ，其它组件要想使用就必须有一个共享的数据载体引入后再使用，因此创建一个button.ts存储文件，里面存放一些数据和方法，其它组件需要时导入即可。

1、创建容器：

每个共享数据的组件都需要创建一个容器在 src/store/下的对应文件里，如 count.vue 需要创建一个 count.ts 文件用来存放他的共享数据。具体当然也可根据情况创建一个没有对应组件的存储文件，存放一些公共数据和方法。

2、容器基本内容的搭建：

(1) 引入defineStore:

 import {defineStore} from 'pinia'// 是一个函数，用来创建仓库

(2) defineStore 的使用：

export const useCountStore = defineStore('count',{state:function(){return {sum:0}}
})

defineStore 的参数：
仓库 ID，以文件名命名即可
配置对象，包含 state(数据)、actions(行为)、getter(类似计算属性)
导出的变量名格式：use[ 你的文件名 ]Store

3、defineStore 配置项可选配置：

(1) state：数据:

返回值为一个对象，对象里面配置需要共享的数据，格式类似vue2的data配置

格式：
state:funciton(){return {data.....}
}

(2) actions：动作行为:

每个属性为一个方法，接收一个value参数，里面进行数据的增删改、逻辑判断等操作

格式：
action:{action1:(value)=>{.......},.....
}

在 actions 里面 pinia 为我们封装好了 this，指向的是当前 store 对象，可以直接 this.pro 调用 state 里面的 pro 数据

(3) getters：计算属性:

在组件里面使用的方法和 state 里面的数据一样，直接 存储对象.getters数据 即可调用

格式：
getters:{bigSum:function(state){return state.sum}，.....
}

4、在组件里面使用 pinia 存储的数据：

(1) 导入需要引入的共享数据的存储文件：

import { useCountStore  }  from '../store/count'

(2) 使用获取对象：

let countStore = useCountStore()

输出 countStore（下面以存储对象代称）可以看到该对象包含了 state 里面定义的数据和一些操作方法(即state\action\getters里面的东西)

注意：这里使用里面的 ref 数据可以直接使用，不用加 value 了，pinia 为我们自动解包：countStore.sum 即可

5、修改 pinia 存储的数据：

在一个使用了 pinia 定义好的仓库共享数据时，有三种方法修改里面 state 数据

(1) 直接修改：

需要知道的是，存储对象里面的 state 对应的数据是响应式的，直接修改页面会自动渲染，同时存储文件的 state 对应的数据也会变化

// 第一种：直接修改function add(){countStore.sum += n.value}即：存储对象.statePro = n

(2) 使用$patch 碎片修改：

// 第二种：使用$patch修改function add(){countStore.$patch({sum: countStore.sum + n.value,copySum:countStore.sum})}即格式如下：
使用：
存储对象.$patch({要修改的 state 数据 1：新的值，....
})

(3) 借助存储文件里面配置好的 actions 进行修改：

适用于一些复杂的带有逻辑判断和接口调用的修改

function add(){countStore.increment(n.value)        // 这里increment是count.ts里面actions里面配置好的方法
}格式：存储对象.actions 里面配置好的行为方法(value)

6、组件使用存储对象里面的数据的简写形式：

正常情况下如果想在模板里面使用共享数据，就需要 存储对象.数据 的形式调用，数据多时就太麻烦了，所以可以在 setup 里面先进行解构，把数据分别赋给对应简单变量，如下所示：

但有一个缺点，就是在 toRefs(存储对象)的时候会把方法也给解析出来，就浪费效率：

所有有了 storeToRefs，其作用和 toRefs 一样，但其不会解析方法，只会解析存储对象里面的数据：

小总结：pinia的数据不用toRefs，使用storeToRefs工具函数

7、$subscribe的基本使用：

作用：存储对象身上的一个方法，用来监视存储对象保存的数据的变化

格式：

storeObj.$subScribe((mutate,state)=>{console.log("storeObj 里面的数据被修改了")........
})

mutate 记录了一些基本但没啥用的信息
state 记录了哪些数据属性被修改了

周总结：

本周收获颇丰：

首先是把vue3和vue2搞明白了，学了很多vue3里面的新API的使用，特别是把setup函数和setup语法糖里面的API差异学习了一下。
其次学习了Element-plus的使用，做了一点小案例，还挺好用的，就是语法有点多，做项目的时候按需使用吧。
然后就是学了一下uniapp的使用，做小程序还挺方便的，但没有深度学习，以后抽时间深度学习一下吧，应该不难，看可多都是vue的语法，然后加了一下自己的配置。

下周计划：