• pinia是什么

   首先它是vue的状态管理库，允许跨越组件共享状态，支持选项式和组合式，也支持vue2和vue3。
  

• 对比vuex

   pinia极具轻量化 你几乎可以忽略他的大小因为他的只有1kb左右，对于ts的支持更加友好，这里其实少说了很多使用起来更
    加便捷
  

• 使用state

  state是store的核心，存放所需要的数据 在组件内使用 这里主要是介绍了组合式的写法

<script setup>
     import {userInfo} from '@/stores/userinfo'
     //这个时候你已经可以页面直接使用了userinfo里面的数据了比如userinfo.userName
     //不需要ref 或者 reactive，已经是响应式数据了
     let userinfo = userInfo();
</script>
//在stores js文件内是这样的 ：这里主要是介绍了选项式也有组合式写法，因为当时为了解决数据持久化的问题就没有组合式了
    import { defineStore } from 'pinia'
    export const userInfo = userInfo('userInfo', {
        // 为了完整类型推理，推荐使用箭头函数
        state: () => {
            return {
               userName'我是腻嫩跌'
            }
        },
        getters: {

        },
        actions: {

        },
        //这里是解决数据持久化的问题 如果有需要留言 下次出
        persist: {
            //这里存储默认使用的是session
            enabled: true,
            strategies: [{
                // key的名称
                key: "userInfo",
                //更改默认存储，我更改为localStorage
                storage: localStorage
            }, ],
        },
    })

• 使用getters

  getter相当于是 store的计算属性，在getter内的函数可以接收 state 作为第一个参数 getter内的方法可以影响其他方法的返回值 代码如下

    import { defineStore } from 'pinia'

    export const userInfo = defineStore('userInfoid', {
        // 为了完整类型推理，推荐使用箭头函数
        state: () => {
            return {
                token: '',
                userinfo: {
                    num: '',
                    passworde: ''
                },
                count: ''
            }
        },
        getters: {
            // 这里返回的是整个store实例
            countUp(state) {
                return state.count + 1
            },
            // 这里修改了countUp的返回值
            countUp_tow(state) {
                return this.countUp + 1
            }
        },
        actions: {
             a_countUp(state) {
                this.count+1
            },
        },
        persist: {
            //这里存储默认使用的是session
            enabled: true,
            strategies: [{
                // key的名称
                key: "userInfoid",
                //更改默认存储，我更改为localStorage
                storage: localStorage
            }, ],
        },
    })
    //在页面内 vue页面结构与上面的相同
     import { userInfo } from 'pinia'
     let u_info = userInfo()
     console.log(u_info.countUp)
     console.log(u_info.countUp_tow)

• # 使用Action

  类似于getters this可以返回整个store实例，于getters不同的是 它可以是异步的，我们也可以使用其他store的Action代码如下

    //引入store
    import { userInfo } from 'pinia'
    export const useCounterStore = defineStore('main', { 
        state: () => ({ count: 0, }),
        actions: { 
            //这里的this和上面的this一个意思就不多多做介绍
            increment() { this.count++ }, 
            //在这个方法里面也可以使用请求 返回你需要的值来修改state里面的值
            randomizeCounter() { this.count = Math.round(100 * Math.random()) },
            userUp(){
                //使用其他store的actions方法
                const u_info = userInfo()
                u_info.a_countUp()
            }
        }, 
    })
    //在页面内页可以这样使用
    <script setup>
         import { userInfo } from 'pinia'
         const u_info = userInfo()
    </script>
     <template>
         //前面有说到 pinia内的数据是响应式的 不需要你多做操作 此处数据自然可以随着方法自己修改
         <div @click="u_info.a_countUp()">{{u_info.count}}</div>
     </template>

以上就是 pinia的基本使用在大佬面前肯定都是一些毛毛雨，有什么建议或者想吐槽的欢迎留言不好的评论我会删掉（狗头）