1.简介

pinia(vuex5.0)，pinia和vuex的使用方式基本一致，用途也是一样，都是状态管理的工具，但pinia是vuex的升级，使用更加简洁，学习成本也更低

2.pinia和vuex的对比

Vuex 中核心部分： State、Getters、Mutations（同步） 和 Actions（异步）

Pinia 中核心部分： State、Getters 和 Actions(同步异步均支持)

3.pinia各部分的作用

·State： 类似于组件中data，用于存储全局状态

·Getters： 类似于组件中的computed，根据已有的State封装派生数据，也具有缓存的特性

·Actions： 类似于组件中的methods，用于封装业务逻辑，同步异步均可以

4.pinia+vue3+vite使用方式

(1).创建项目

npm init vite@latest

(2).安装pinia

npm install pinia -S

(3).将pinia挂载到vue中

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建 Pinia 实例
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

(4).在src文件下创建一个store文件夹，并添加index.js

import { defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器
// 参数2：一些选项对象，也就是state、getter和action
// 返回值：一个函数，调用即可得到容器实例

export const useMainStore =  defineStore('main',{
    // 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
    // 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    state:()=>{
        return {
            info:"pinia",
            count:1
        }
    },
    // 2. 使用容器中的 state
    // 3. 通过 getter 修改 state 
    // 4. 使用容器中的 action 同步和异步请求
    getters: {
    infoCount(state) {
      return 'getters:' + state.info + state.count
    }
  },
  actions: {
    changeState() {
      this.count++
      this.info = "actions修改数据"
    },
    changeStates(num) {
      this.count += num + 10
      this.info = "actions修改数据"
    }
  }
})

(5).使用

<template>
      <button @click="edit">修改state的值</button>
      <div>
        <p>pinia:{{ mainStore.info }}</p>
        <p>pinia:{{ mainStore.count }}</p>
      //解构后：
        <p>pinia:{{ info }}</p>
        <p>pinia:{{ count }}</p>
      </div>
        <h3>pinia getters使用</h3>
        <p>{{ mainStore.infoCount }}</p>
</template>

<script setup>
import { useMainStore } from "../store";
import { storeToRefs } from "pinia";
//---pinia 获取state的普通使用---
const mainStore = useMainStore();
//---pinia 获取state的解构使用---
const { info, count } = storeToRefs(mains tore)
//修改state的值
//1.普通修改
// function edit() {
//   mainStore.$patch(state => {
//     state.info = '修改过了',
//       state.count++
//   })
// }
//2.使用actions修改
function edit() {
  // mainStore.changeState()
  mainStore.changeStates(10)
}
</script>