pinia是什么？

pinia是一个用于vue的状态管理库，类似于vuex,是vue的另一种状态管理工具

一、Pinia安装与注册

yarn add pinia 或 npm install pinia -S

安装成功后在main.js文件中添加以下代码：

import { createPinia } from "pinia";
const pinia = createPinia();
app.use(pinia);

经过以上操作Pinia的安装与注册就完成了

二、使用Pinia

在src文件夹下创建store文件夹，用来存放我们创建的各种store，然后在该目录下新建各种.js或.ts后缀结尾的文件，
这些文件主要用来存放各种store数据例如User、订单

import { defineStore } from "pinia";
export const useUserStore = defineStore('user', {
    state:() =>{
        return {
            name: '牛二',
            age: 13,
            sex: '男'
        }
    }
});

1、操作state

1.1、读取store里面的state数据

<template>
  <div class="store-test">
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <p>性别：{{sex}}</p>
  </div>
</template>
<script setup>
import {storeToRefs} from 'pinia'
import { useUserStore } from "@/store/user";
const userStorm = useUserStore()
const {name, age, sex} = storeToRefs(userStorm)
</script>

注意：上面代码中的解构赋值const {name, age, sex} = storeToRefs(userStorm)如果不用storeToRefs()包裹的话将会破坏数据的响应，所以需要用storeToRefs()包裹

1.2、修改单个state数据

const updateState = () =>{
  userStorm.name = '张老三'
}

1.3、重置state数据

const reset = () => {
  userStorm.$reset()
}

1.4、批量修改state

const patchState = () => {
  userStorm.$patch({
    name: '张三丰',
    age: '120'
  })
}

2、getters属性

2.1、getter添加和使用

pinia中的getter和vue中计算属性一样，它可以在获取state的值时做一些处理。
如下代码：

getters: {
    getAddAge: (state) => {
        return state.age + 2
    }
}

在页面标签中直接使用store.getAddAge方法，这样可以保持响应式.

<p>新年龄：{{userStore.getAddAge}}</p>

2.2、getter调用其他getter

getNameAdnAge() {
    return this.name + this.getAddAge; // 调用其他getter
}

页面使用

<p>getter调用其他getter: {{userStore.getNameAdnAge}}</p>

2.3、getter传参

getAddAge: (state) => {
    return(num)=> state.age + num
}

页面使用

<p>getter传参：{{userStore.getAddAge(1100)}}</p>

3、actions属性

之前两点 state和getters属性都是数据层面的，类似于data数据和computed属性，没有处理业务逻辑的能力，
如果需要的话我们可以写在actions里面
actions属性是一个对象，这个对象里也有很多的方法，包括同步、异步方法
如下代码：

actions: {
    updateName(name){
        this.name = name
    }
}

页面使用

const updateName = () => {
  userStore.updateName('牛老二')
}