Vue的状态管理Pinia

---

• 本人最近在找工作，有推荐的小伙伴私我，不胜感激。

一、介绍

• 官网：https://pinia.web3doc.top/introduction.html
• Pinia 是 Vue 官方团队开发的一个全新状态管理库
• Vue2和Vue3都可以使用
• 去除了mutations，简化了状态管理的使用
• 支持TS，Vuex对TS的语法支持不是完整的
• 去除了命名空间模块，鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，因为每个store都会有唯一的store id

二、install

pnpm install pinia --save

三、store

1、创建并全局引入

• 创建src/store/index.ts

• main.ts中全局注册

// 引入pinia
import { createPinia } from 'pinia'

// 挂载到vue根实例
createApp(App).use(createPinia)

2、使用

1. index.js

import {defineStore} from 'pinia'

/**
 * 创建第1个store
 *
 * userStore：容器名称
 * user：store的id，必须唯一
 */
export const userStore = defineStore('user', {
    state: () => {
        return {
            user: {
                name: 'kimi',
                age: 18,
                honor: [
                    '1-三好学生',
                    '1-优秀班干部',
                    '2-优秀班干部'
                ]
            }
        }
    },
    //普通函数的写法时，函数中的this代表该store
    getters: {
        /**
         * 使用store
         *
         * @param store
         * @returns
         */
        getUserHonorNum: store => {
            return store.user.honor.length
        },
        /**
         * 使用本store的getters
         *
         * @param store
         * @returns
         */
        getUserAvgHonorNum: store => {
            return store.getUserHonorNum / 3
        },
        /**
         * 传入自定义参数
         *
         * @param store
         * @returns
         */
        getUserAvgHonorNumber: store => {
            return year => {
                return store.getUserHonorNum / year
            }
        },
        /**
         * 访问其它store中的getters
         *
         * @param store
         * @returns
         */
        getAppNum: store => {
            //导入其它store
            const otherStore = appStore()
            return otherStore.num
        }
    },
    //actions书写格式和methods一样，因为他不会传入任何默认参数
    //普通函数的写法时，函数中的this代表该store
    actions: {
        /**
         * 年龄+1，异步操作，2秒之后再执行
         */
        setAgeIncrement() {
            setTimeout(() => {
                this.user.age++
            }, 2000)
        },
        /**
         * 传入自定义参数 - 单个
         *
         * @param age
         */
        setAge(age) {
            this.user.age = age
        },
        /**
         * 传入自定义参数 - 多个
         *
         * @param name
         * @param age
         */
        setUser(name, age) {
            this.$patch((state) => {
                state.user.name = name
                state.user.age = age
            })
        }
    }
})

/**
 * 创建第2个store
 */
export const appStore = defineStore('app', {
    state: () => {
        return {
            num: 5
        }
    },
    getters: {
        
    },
    actions: {
        
    }
})

2. 组件中使用

<script setup>
import { storeToRefs } from 'pinia'
import {userStore} from '@/store/index'

//1、state
//访问state
userStoreData.user

//就像setup 中的props 一样，我们不能对其进行解构，因为它会破坏响应式
const { user } = userStoreData

//为了从 Store 中提取属性同时保持其响应式，可以使用pinia的storeToRefs()， 它将为任何响应式属性创建refs
const { user } = storeToRefs(userStoreData)

//直接修改state中的共享状态
userStoreData.user.age++

//批量修改state中的共享状态，通过调用 $patch 方法
userStoreData.$patch((state) => {
    state.user.name = 'sally'
    state.user.age++
})

//通过调用store上的$reset()方法将状态重置到其初始值
userStoreData.$reset()

//订阅状态，与常规的 watch() 相比，使用 $subscribe() 的优点是 subscriptions 只会在 patches 之后触发一次
userStoreData.$subscribe((mutation, state) => {
    /*
    打印一下mutation
    {
        //类型
        type: 'direct'、'patch object'、'patch function',
        //store的id，创建store的第一个参数
        storeId: 'user',
        events:{......}
    }
     */
})


//2、getters
userStoreData.getUserHonorNum
userStoreData.getUserAvgHonorNum
userStoreData.getUserAvgHonorNumber(3)//传入自定义参数
userStoreData.getAppNum


//3、actions
userStoreData.setAgeIncrement()
userStoreData.setAge(20)//传入自定义参数 - 单个
userStoreData.setUser('sally',25)//传入自定义参数 - 多个
</script>