Vue3-45-Pinia-定义全局状态的两种方式

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 }

})