pinia的基本使用，以及对state、action的订阅监听（$subscribe、$onAction）

pinia的优点：

我们可以定义任意数量的store，因为其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。

如何创建store：

用 pinia 的 defineStore()方法，来创建一个store

如何创建store：
	调用pinia的defineStore()函数即可，该函数接收两个参数：
	    name：一个字符串，必传，该store的唯一id
	    options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等

---

my-test.ts

import { defineStore } from 'pinia'

const InitUserInfo: UserInfo = {
  name: '梨花',
  age: 25,
  sex: '男'
}

// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
  // 添加state，state接收的是一个箭头函数返回的值，state不能接收一个对象
  state: () => ({
    token: 'main_token',
    userInfo: { ...InitUserInfo }
  }),

  /* 
    添加getters，接收一个对象，该对象里面是各种方法，
    你可以把它想象成Vue中的计算属性，它的作用就是返回一个结果，
    
    getters也是会被缓存的，

    在getters中的，各个方法之间相互调用采用this关键字即可
  */
  getters: {
    // 定义一个getAddAge()方法，该方法默认接收一个state参数(即：上面的那个state)
    getAddAge(state): number {
      return state.userInfo.age + 1
    },

    /*
      调用其他getters中的方法（在getter中如何使用this）
      一般情况下，getter仅仅依赖于state，但是有时候也会依赖其他getter，
      所以呢，如果getter定义为【非箭头函数】，就可以【通过this拿到整个store实例】
      因为，箭头函数没有自己的this绑定，而是继承了外部的this绑定，所以箭头函数中无法使用this
    */
    getNameAge(state): string {
      console.log('getters中的this=', this)
      return state.userInfo.name + '哈哈' + this.getAddAge
    },

    /*
      getter可以通过，返回一个函数xxx来接收参数，这个函数xxx的返回值也就是此getter最终的值
      在执行此操作时，getter 不再缓存，它们只是调用的函数
	
	  在`.vue`文件中使用的时候：<h2>getter中接收参数: {{ plusAgeBy(100) }}</h2>
    */
    plusAgeBy(state) {
      return (moreNum: number) => {
        console.log('传递给getter的参数是=', moreNum)
        return state.userInfo.age + moreNum
      }
    }
  },

  /*
    添加actions，属性值是一个对象，该对象里面是各种方法，包括同步、异步方法

    特殊之处：actions中的方法内部的this指向的是当前store，即：
      在`defineStore`中，state对象中的属性，会被绑定到this上，可以通过this.name来访问和修改name属性，
      这里state对象中定义了name、age、sex属性，因此可以通过this.name、this.age、this.sex 来访问和修改这些属性
  */
	actions: {
	    saveName(name: string) {
	      this.userInfo.name = name
	    },

	    changeToken(newToken: string, isFlag: boolean){
	      return new Promise((resolve, reject) => {
	        this.token = newToken
	        if(isFlag){
	          resolve(`token：${this.token}`)
	        } else {
	          reject('error')
	        }
	      })
	    }
	}
})

store / index.ts

// 引入`createPinia()`函数，创建Pinia实例
import { createPinia } from 'pinia'

//#region 从`pinia-plugin-persistedstate`包中引入'createPersistedState()'函数
/* 
  这个函数是一个插件，这样安装：`npm i pinia-plugin-persistedstate`
  用于在Pinia中实现状态的持久化存储，
  也就是说，即使在应用重新加载或关闭后，应用的状态仍然可以保存和恢复
*/
//#endregion
import { createPersistedState } from 'pinia-plugin-persistedstate'

// 创建一个Pinia应用实例，并将其赋值给store变量
const store = createPinia()

// 将，引入的持久化状态插件，应用到`store`上，这样就能让`store`中的状态可以进行持久化存储
store.use(createPersistedState())

// 将store对象导出，使其可以在其他模块中使用
export { store }

// 导出 ./modules/my-test 模块中的所有内容，以便其他模块可以直接导入并使用这些内容
export * from './modules/my-test'

// 将store对象，作为默认导出，以便在其他模块中可以使用 import store from './store' 的方式导入
export default store

---

Pinia对state的订阅监听（$subscribe）

Pinia 对 store数据进行的订阅监听，
更直白点说，当store中的state变化到我们想要的那个值时，我们需要去做些什么，那么我们就需要用到$subscribe

app.js

import {defineStore} from "pinia"
const appStore = defineStore('appStore', {
  state: () => ({
      baseUrl: 'https://www.baidu.com/'
  }),
  actions: {
    changeState(params) {
      // console.log('接收到的参数===>', params)
      this.baseUrl = params
    }
  }
})
export default appStore

.vue文件

<template>
  <div> {{ baseUrl }} </div>

  <div v-show="isShow"> 该我出现了 </div>

  <button @click="changeData"> 通过actions改变数据 </button>
</template>

<script setup>
	import {ref} from "vue"
	import {storeToRefs} from "pinia"
	import appStore from "@/store/app"

	const store = appStore()
	const { baseUrl } = storeToRefs(store)
	const afterChangeUrl = 'https://www.taobao.com/'
	let isShow = ref(false)

	const changeData() {
		store.changeState(afterChangeUrl)
	}

	const subscribe = store.$subscribe(
	  (mutation, state) => {
		/*
		  mutation主要包含三个属性值：
			events：当前state改变的具体数据，包括改变前的值和改变后的值等等数据
			storeId：是当前store的id
			type：用于记录这次数据变化是通过什么途径，主要有三个分别是
				direct：通过 action 变化的
				patch object：通过 $patch 传递对象的方式改变的
				patch function：通过 $patch 传递函数的方式改变的
		
		*/
		// 我们就可以在此处监听store中值的变化，当变化为某个值的时候，去做一些业务操作之类的
		
		console.log(mutation)
		console.log(state.baseUrl)

		if (state.baseUrl === afterChangeUrl) isShow.value = true
		else isShow.value = false
	  },
	  /*
		第二个参数options对象，是各种配置参数
		  detached：布尔值，默认false，正常情况下，当订阅所在的组件被卸载时，订阅将被停止删除；detached值为true时，即使所在组件被卸载，订阅依然在生效。
		  参数还有immediate，deep，flush等等参数 和vue3 watch的参数是一样的，多的就不介绍了，用到再看文档吧
	  */
	  { detached: false }
	)

	// 停止订阅
	subscribe()  //调用上方声明的变量值，示例（subscribe），即可以停止订阅
</script>

---

Pinia对 action 的订阅监听（$onAction）

与之配合使用的是上面的my-test.ts

.vue文件

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import myTest from '@/store/modules/my-test'

const store = myTest()
const { token } = storeToRefs(store)

console.log(`未改变之前的token=${token.value}`)

// 对actions中的方法进行监听订阅
// @ts-ignore
const unsubscribe = store.$onAction(
  /**
   * 传入一个字符串参数，指定要订阅的actions中的方法名称
   * 如果不传入字符串参数，$onAction方法将会订阅监听actions中所有的方法
   */
  ({
    name, // myTest.ts这个store中 action函数的名称
    store, // store实例，这里是myTest.ts这个store
    args, // action函数参数数组
    after, // 钩子函数，在action函数执行返回，或者resolve后执行
    onError // 钩子函数，在action函数报错，或者reject后执行
  }) => {
    console.log('name=', name) // name= changeTok
    console.log('store=', store)
    console.log('args=', args) // ['米-token', false]
    after(result => {
      console.log('after-result=', result) // after-result= token：米-token
    })
    onError(error => {
      console.log('onError-error=', error) // onError-error= error
    })
  },

  false // 默认是false，设置为true的时候，组件卸载时，订阅依然有效
)
// 同样可以调用store.$onAction返回值，即unsubscribe，进行停止订阅
// unsubscribe() // 手动停止订阅

async function changeTolenMi() {
  try {
    let result = await store.changeToken('米-token', true) // $onAction-成功了= token：米-token
    console.log('$onAction-成功了=', result)
  } catch (e) {
    console.log('$onAction-失败了=', e)  // $onAction-失败了= error
  }
}
</script>

<template>
  <button @click="changeTolenMi">订阅action</button>
</template>