Vue3状态管理器大菠萝 Pinia 学习使用笔记

先来一张大菠萝 Pinia 美照镇楼。

Pinia 是什么？

按照官方的介绍：

Pinia最初是在 2019 年 11 月左右重新设计适用于Vue3组合式API的状态管理库。

目前 Vuex 最新版本是 v4.0.2，Pinia 可以说是 Vuex 的升级版（个人理解为 vuex 5.x 版本），尤雨溪强势推荐。

Pinia相对Vuex 优化了什么

1. Vue2 和 Vue3 都能支持
2. 相比较Vuex放弃 Mutation ，只保留 state, getter 和 action ，简化状态管理库
3. 支持 Vue3 的 Composition api
4. 为 JS 用户提供适当的 TypeScript 支持
5. 可以自己写一些插件对Pinia进行扩展
6. 支持服务器端渲染

安装

pinia使用您最喜欢的包管理器安装：

yarn add pinia
# or with npm
npm install pinia

创建第一个store仓库

1、在src目录下创建store目录
2、创建一个 PiniaTest.ts 的文件（文件名可以根据自己需求来）

import {defineStore} from 'pinia'

// 使用 defineStore 定义一个仓库，
// 组件中需要引入仓库，并使用useStorePinia 进行实例化 
// main 是仓库唯一的ID，可以根据自己的需求定义
export const useStorePinia = defineStore('main', {
     // 闭包
    state () {
        return {
            msg: 'hello word',
            count: 10,
            content: '这是通过getters获取Pinia管理的仓库数据'
        }
    },
    // 简写方式
    // state: () => ({
    //    msg: 'hello word',
    //    count: 10
    // }),
    getters:{
        getMsgFn(){
            return this.content
        }
    },
    actions:{
    	// actions 里面可以执行同步和异步任务
    	// 也可以接收外部传递进来的参数
    	// 可以直接修改仓库的值，此处不能使用箭头函数，否则找不到this，打印显示 undefined
        changeMsg (val) {
            console.log('传入进来的值：', val)
            this.msg = '1111'
            this.count == val;
        }
    }
})

引入并使用步骤

1. 在 main.js 里面引入pinia
2. 使用 createPinia 进行实例化
3. 挂载到Vue身上(实际上是将插件进行注册，给放到已经注册的插件数组列表中)

import { createApp } from 'vue'
// 引入inia
import {createPinia} from 'pinia'
import App from './App.vue'

console.log('createPinia:', createPinia);

// 创建实例
const pinia = createPinia();

console.log('pinia:', pinia);

// 使用插件
createApp(App).use(pinia).mount('#app')

Pinia在组价中的使用

<template>
    <div style="background: pink;padding: 10px;margin: 10px 0;">
        <div>组件11111111111</div>
        <div>仓库数据：{{count}}---{{getMsgFn}}</div>
        <button @click="changeStoreCountFn">点击</button>
    </div>
</template>

<script setup>
import {defineProps} from 'vue';
import { storeToRefs } from "pinia";

// 引入仓库
import {useStorePinia} from '../Store/PiniaTest'

// 此处 defineStore 与仓库名一样
const store = useStorePinia();


// 此处可以获取getters 和 actions 中的函数，但是不能直接获取仓库中的数据，需要使用storeToRefs强转ref类型
const {changeMsg, getMsgFn} = store;

// 只有强转ref后数据才是响应式的
const {msg, count} = storeToRefs(store);
console.log(11111, store,storeToRefs(store), msg, count)


// 修改仓库count值
const changeStoreCountFn = () => {

    // 方式 1、通过触发仓库 actions 中定义的函数执行
    changeMsg(++count.value)
    console.log(2222,getMsgFn)


    // 方式 2、读取仓库数据进行修改
    // count.value++
    // msg.value = 'aaaaaa'


    // 方式 3、对象形式修改仓库数据
    // store.$patch({
    //     msg: 'change word',
    //     count: ++count.value
    // })


    // 方式 4、函数形式修改仓库数据
    // store.$patch((state) =>{
    //     state.msg = 'change word';
    //     state.count++
    // })
}
</script>

效果展示