vue3pinia

目录是store
Store 包含了状态（state）、获取器（getters）和操作（actions）,相当于组件中的： data、 computed 和 methods。
Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

一.pinia的理解及其搭配pinia环境

理解：
pinia:符合直觉的vue.js状态管理库/集中式状态（数据）管理
组件之间需要共享的数据可以放在pinial里
搭配环境：
第一步：npm install pinia
第二步：操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

二.使用

创建store
引入并使用defineStore()函数定义Store
store/count.ts
命名一般是usexxxStore

// 引入defineStore用于创建store
import {defineStore} from 'pinia'
// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{// 动作actions:{},// 状态state(){return {talkList:[{id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},{id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},{id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}]}},// 计算getters:{}
})

组件使用store

<template><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li></ul>
</template><script setup lang="ts" name="Count">import axios from 'axios'import {useTalkStore} from '@/store/talk'const talkStore = useTalkStore()
</script>

二.修改数据（三种方式）

1.第一种修改方式，直接修改

countStore.sum = 666
2.第二种修改方式：批量修改

countStore.$patch({
sum:999,
school:‘atguigu’
})
3.第三种修改方式：借助action修改（action中可以编写一些业务逻辑）

import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sumthis.sum += value}},//减decrement(value:number){if(this.sum > 1){this.sum -= value}}}
})

组件中调用action即可

// 使用countStore
const countStore = useCountStore()// 调用对应action
countStore.incrementOdd(n.value)

三.storeToRefs

作用：借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。
注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据。