使用pinia进行全局数据共享

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}} &nbsp; &nbsp;
  </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也支持组合式方式定义，具体可以详见官网，只是定义方式不同，使用方式不变。

        本人是一个从小白自学计算机技术，对前端、运维、后端、各种中间件技术、大数据等有一定的学习心得，想获取自学总结资料（pdf版本）或者希望共同学习，关注微信公众号：it自学社团。后台回复相应技术名称/技术点即可获得。（本人学习宗旨：学会了就要免费分享）