求一键三连
希望大家看完觉得有用的话点赞、关注和收藏，感谢！！！
前言
对比
少了mutation和modules，很正常，因为完全用不到了，所以就没了，pinia真的比vuex方便多了，少写很多东西，逻辑上也更加简单
使用pinia
（ps：这里一开始的文件交index.js，就相当于./store文件夹的主文件）
单独定义每一个store，也就是一个单独的js文件
defineStore返回的是一个函数，不是一个store，用use来命名函数（hooks），一般是用js文件名（id）来命名。
useStore会返回一个store。
示例：
import {
defineStore } from 'pinia'
const useUser = defineStore("user", {
state: () => ({
name: "why",
age: 18,
level: 100
})
})
export default useUser
在组件使用时要重命名：id+store === id仓库
一般我们会解构来使用，这样比较方便，可以直接用store里的变量名，不用加 idstore 前缀了
因为是store，所以用storeToRefs（ ）
示例：
state
内部提供的方法加$
实例： 一般来说第一个一个个修改是最常用的，其他的用的少
function changeState() {
// 1.一个个修改状态
userStore.name = "kobe"
userStore.age = 20
userStore.level = 200
// 2.一次性修改多个状态
userStore.$patch({
name: "james",
age: 35
})
// 3.替换state为新的对象
const oldState = userStore.$state
userStore.$state = {
name: "curry",
level: 200
}
console.log(oldState === userStore.$state) //true 所以这里也可以发现不是真的替换，只是暂时的，age的旧值保留了
}
function resetState() {
userStore.$reset() //重置
}
对数据的修改再也不用传mutation了，爽
Getters
和之前没有太多差别，一共四个操作，真的很方便，超级爽，比vuex简单多了
template中实际使用
就特别简单，就相当于是一个方法，什么都不用加（不用加getters了）
Actions(没有context了)
异步函数放这里，有个特点，又使用this了。
特别注意：
这里就和之前的vuex不一样了，因为没有context上下文这个东西，是直接用的state
组件中获取数据：
const homeStore = useHome()
homeStore.fetchHomeMultidata().then(res => {
console.log("fetchHomeMultidata的action已经完成了:", res) //这是确认获取数据，打印一下 res是异步函数返回的值
})
这里唯一要说的就是补补异步函数和promise的功课，时不我待啊！
使用流程
安装pinia（菠萝）后
1.创建stores/pinia文件夹,在里面创建index.js文件，创建pinia,然后就可以使用pinia了
import {
createPinia} from 'Pinia'
const pinia=createPinia();
export default pinia;
2.在main.js中导入pinia，并使用它
import {
createApp } from 'vue'
import App from './App.vue'
import pinia from './pinia'
createApp(APP).use(pinia).mount(#app)
3.在pinia文件夹里创建你需要的store，分别创建单独的js文件即可，使用defineStore函数
这里以user.js为例
import {
defineStore } from 'pinia'
const userStore=defineStore("user",{
state:()=>({
name:'aaa',
age:28,
friends:[]
}),
getters:{
getFriendById(state) {
return function(id){
return state.friends.find(id)
}
}
},
actions:{
//获取网络请求
async fetchHomeMultidata() {
const res = await fetch("http://123.207.32.32:8000/home/multidata")
const data = await res.json()
//另一个写法
fetch("http://123.207.32.32:8000/home/multidata").then(res => {
res.json().then(data => {
console.log(data)
})
})
this.banners = data.data.banner.list
this.recommends = data.data.recommend.list
// resolve("bbb") //返回参数，自定义
}
}
})