Pinia 的作用介绍

Pinia 是管理 全局状态的工具。
全局状态 ：
我的理解，就是一个全局的变量，在项目内，所有的组件都可以使用它，对它进行读写操作。

全局状态的三个核心概念

state : 最核心的，就是变量的定义；

getters : 类似于组件的【计算属性】，是对 state 的修饰函数；

actions : 类似于组件的 【方法】，可以对 state 进行逻辑处理；

简单理解 ： 
state 是定义全局状态的地方；
getters 是读取全局状态的地方；
actions 是操作全局状态的地方。getters 和 actions 可以没有；
但是 state 必须有！！！

全局状态定义的核心API

defineStore() : 定义全局状态的api，它接收两个参数：
参数1 ： 全局状态的 id，必须的，且确保是唯一的；
参数2 ： 属性的配置对象，就是对 state、getters、actions 的配置，有两种写法：
   写法一 ： 直接写一个对象的方式，叫做 Option Store
   写法二： 写一个函数的形式，类似于组件的setup 方式，叫做 Setup Store

两种定义方式展示

Option Store 方式

这种方式就类似于 【选项式API】

state : 需要使用箭头函数的方式将全局的变量通过返回值的形式返回回去。

// 导入 defineStore API
import { defineStore } from 'pinia'// 定义全局状态方式一 ： option store
export const useClassStore = defineStore('classinfo',{// 定义 state : 全局的状态state: () => {return {name:'快乐足球一班',studentNum:18}},// 定义 getters : 可选 ： 类似于计算属性getters:{getNameStr():string{return this.name+' -后边这一块是我拼接上的'}},// 定义 actions ： 可选 ： 就是常规的方法actions:{updateName(){this.name = '使用actions修改的name'}}
})

Setup Store 方式

这种方式就类似于 【组合式API】

这种方式非常的简洁，个人还是比较推荐的，就像写 组件一样

// 导入 defineStore API
import { defineStore } from 'pinia'// 导入 reactive 依赖
import { reactive } from 'vue'// 定义全局状态方式二 ： setup store
export const useStudentStore = defineStore('studentinfo',() => {// 响应式状态const student =  reactive({name : '小明',age:12,className:'快乐足球一班'})// 直接定义一个方法进行数据属性的修改const updateName = (nameP:string)=>{student.name = nameP}// 最后将 全局状态变量 和 可以公开操作的方法返回，这样在外部才可以访问return { student,updateName }})