vue3中pinia的使用

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。官网地址：https://pinia.vuejs.org/zh/
1、安装pinia

npm install pinia

2、在项目中使用pinia
在main.js中全局挂载

import { createApp } from 'vue'
import { createPinia } from 'pinia';
const pinia = createPinia();
import App from './App.vue'
const app = createApp(App)
app.use(pinia)
app.mount('#app')

2.1、定义 Store
我们得知道 Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字。
在src文件路径下创建文件夹stores，stores下创建文件store.js

import { defineStore } from 'pinia'
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID，简单点说就可以理解成是一个命名空间。
//第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
//第二个是 getters，第三个是 actions。
import {defineStore} from 'pinia'
const useUserinfo = defineStore("userinfo",{
    state:() => ({        
        name:'zhangsan',
        age:20
    }),    
    getters: {
  	},
  	actions: {
  	}
})

//暴露这个useUserinfo模块
export default useUserinfo

在其他组件页面引用

<script setup>
    import useUserinfo from '../stores/store';
 	const userinfoStore = useUserinfo();//获取store中的userinfoStore
 	//pinia好处就是可以直接操作name，在vuex还要commit在mutaitions修改数据
	const editName = ()=>{
	    userinfoStore.name = 'lisi'
	}
</script>

<template>
  <div>展示pinia的userinfo的name值：{{userinfoStore.name}}</div>
  <div>展示pinia的userinfo的age值：{{userinfoStore.age}}</div>
  <button @click="editName()">修改name为lisi</button>
</template>
<style scoped>
</style>

由此可见，pinia好处就是可以直接操作name，在vuex还要commit在mutaitions修改数据

如果在使用组件的时候，把Store获取到后解构出来，会出现数据不能响应问题

<script setup>
    import useUserinfo from '../stores/store';
	const userinfoStore = useUserinfo();//获取store中的userinfoStore
	
	const {name,age} = userinfoStore;//进行解构
	const editName = ()=>{
	    userinfoStore.name = 'lisi'
	}
</script>

<template>
  <div>展示pinia的userinfo的name值：{{userinfoStore.name}}</div>
   <div>展示pinia的userinfo的age值：{{userinfoStore.age}}</div>
   <div>解构name值：{{name}}</div>
   <div>解构age值：{{age}}</div>
   <button @click="editName()">修改name为lisi</button>
</template>
<style scoped>
</style>

解决办法：pinia提供了一个函数**storeToRefs()**解决

import {storeToRefs} from 'pinia'
const userinfoStore = useUserinfo();//获取store中的userinfoStore
const {name,age} = storeToRefs(userinfoStore);//进行解构

2.2、getters的使用
getters类似于 vue 里面的计算属性，可以对已有的数据进行修饰。不管调用多少次，getters中的函数只会执行一次，且都会缓存。
getter的state和this都能访问，且this指的是store实例

2.3、actions的使用
Action 相当于组件中的 method。它们可以通过 defineStore() 中的 actions 属性来定义，可以处理同步，也可以处理异步。
actions没有state，只能通过this拿store

如果是处理异步，一般与 async 和 await连用
例如：

后续再补充