1、简介
在vue2中组件之间的数据传递有很多种实现方式,可以通过事件、事件总线、发布订阅、以及vuex进行全局数据共享,关于vuex的详细介绍见博客 Vue中使用vuex进行全局数据共享处理_vue全局数据共享-CSDN博客 ;在vue3中,使用pinia作为vuex的替代品,pinia详细介绍见官网 介绍 | Pinia 中文文档。
2、安装pinia依赖
2.1、使用npm安装
npm i pinia
2.2、使用pnpm安装
pnpm i pinia
3、配置pinia
在main.ts文件中,添加如下内容:
import {createPinia} from "pinia"
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
4、pinia的使用
4.1、store定义
pinia有三个概念:state、getters、actions,使用pinia创建一个store如下:
import {defineStore} from 'pinia'
export const tokenStore = defineStore('loginKey',{
actions: {}, // 定义操作数据方法
state(){ // 定义数据
return {
member: {}
}
},
getters: { // 定义计算属性
}
})
4.2、数据存储和读取
如下示例以保存对象数据为例。
4.2.1、数据存储
<template>
<h2>当前值为:{{ test.member }}</h2>
</template>
<script setup lang="ts" name="Count">
// 引入对应的 xxxStore
import {testStore} from '@/store/test.ts'
// 调用 xxxStore得到对应的store
const test = testStore()
test.member = ***
</script>
4.2.2、数据读取
<template>
<a-layout-header class="header">
<div style="float: right; color: white">
{{member.id}}
</a-layout-header>
</template>
<script lang="ts" setup name="GET">
import {ref} from "vue";
// @ts-ignore
import {testStore} from '@/pinia/test.ts'
import {storeToRefs} from "pinia";
const test = testStore()
const {member} = storeToRefs(test)
</script>
4.3、修改数据(三种方式 )
4.3.1、单独修改某一变量
// 第一种
test.member = {}
4.3.2、批量修改
// 第二种(批量修改)
testStore.$patch({
aa:999,
bb:'test',
member: {}
})
4.3.3、使用actions修改
// 第三种(借助actions修改)
import { defineStore } from 'pinia'
export const testStore = defineStore('test', {
actions: {
//加
increment(value:number) {
if (this.sum < 10) {
//操作countStore中的sum
this.sum += value
}
},
//减
decrement(value:number){
if(this.sum > 1){
this.sum -= value
}
}
},
state(){
return {
sum: 0
}
})
// 在组件中调用 actions 方法
const test = testStore()
// 调用对应action
test.incrementOdd(val)
4.4、使用计算属性getters
// 第三种(借助actions修改)
import { defineStore } from 'pinia'
export const testStore = defineStore('test', {
actions: {
//加
increment(value:number) {
if (this.sum < 10) {
//操作countStore中的sum
this.sum += value
}
},
//减
decrement(value:number){
if(this.sum > 1){
this.sum -= value
}
}
},
state(){
return {
sum: 0
}
},
getters:{
bigSum:(state):number => state.sum *10
}
})
5、总结
本文详细介绍如何通过pinia 进行全局数据共享,在Vue3中新增组合是API,pinia也支持组合式方式定义,具体可以详见官网,只是定义方式不同,使用方式不变。