安装和配置 还有基本使用教程

yarn add pinia
# 或者使用 npm
npm install pinia

store 是一个用reactive 包裹的对象,不能对其进行直接解构

main.ts

//引入并创建pinia
import {createPinia} from 'pinia'
const pinia = createPinia()

createApp(App)
//注册pinia
.use(pinia)
.mount('#app')

getters 和 actions

创建数据

/store/index.ts

import { defineStore } from "pinia";
export default defineStore('main',{
    state:() =>{
        return{
            title:'我是pania的标题'
        }
    },
    //类似于vue2的computed,有缓存的计算属性
    getters:{
        getTitle(state){
            console.log('getters中的update调用了');
            return state.title ='getters'
            this.title === state.title //true它们是同一个东西
        }
        //或者,这主要是因为ts不能正确推到返回值的类型
        getTitle():string{
            console.log('getters中的update调用了');
            return this.title ='getters'
        }
    },
    //类似于vue2的methods
    actions:{
        setTitle(){
            this.title = 'action'
        }
    }
})

在需要使用Pinia数据的地方

<script name="demo-1" setup lang="ts">

//导入Pinia数据模块
import {useMainStore} from '../store/index'

//storeToRefs可以让Pinia使用起来更方便
import {storeToRefs} from 'pinia'

//mainStore不要简化这一步!,mainStore上面还有很多有用的方法
const mainStore = useMainStore()

//这个title就是Pinia里面的title了,是ref对象,在非代码模板区域需要.value
const {title} = storeToRefs(mainStore)

//如果要批量修改多个pinia对象写法
mainStore.$patch({
    //这里不用.value
    title:mainStore.title+='1'
})
//或者函数写法
mainStore.$patch(state=>{
    state.title +='2'//title应该等于 => "我是pania的标题2" 了
})
//调用actions中的函数
mainStore.setTitle()
//调用getters中的函数
mainStore.getTitle
mainStore.getTitle//因为有缓存,所以只会执行一次console.log('getters中的update调用了');
//Pinia还有其它很多有用的API,比如重置Pinia,如果你后续有更好的管理Pinia方法别忘了告诉我
</script>

<template>
<div>{{title}}</div>
<button @click="title+='!'">点我修改title</button>
</template>