当前位置：首页 > news >正文

《Vue3学习手记5》

news 来源：原创 2025/4/27 8:12:35

pinia

共享的数据交给集中状态管理

引入与使用

//main.ts
// 引入Pinia
import {createPinia} from "pinia"const pinia=createPinia()
app.use(pinia)

案例：

<template><div class="count"><h2>当前和为：{{ sum }}-----学习{{ subject }}</h2><h2>sum放大十倍后：{{ bigSum }}</h2><select v-model.number="n"> <!-- 把n转成数字型 --><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加n</button><button @click="reduce">减n</button></div><hr><div class="top"></div>
</template><script setup name="Count">
import {ref,toRefs} from "vue"
import {useCountStore} from "@/store/Count"
import { storeToRefs } from "pinia"
const countStore=useCountStore()
// console.log("@@@",countStore)  
// ********************************************************************   
// 知识点二：// 当需要的数据很多时，模板中需要写的countStore就很多，可以简化。// const {sum,subject}=toRefs(countStore)// 但是这样写会将countStore中所有数据都变成响应式，最好使用storeToRefsconst {sum,subject,bigSum}=storeToRefs(countStore)const n=ref(1)function add(){
// ********************************************************************
// 知识点一：//第一种修改方法： // pinia可以直接对数据进行修改,但vuex不可以// countStore.sum+=n.value   //注意这里的sum没有value// 第二种修改方法：(碎片)// countStore.$patch({//     sum:88,  //点击加，sum变为88// })// 第三种修改方法：（适合进行复杂处理时使用），具体见Store/Count.tscountStore.increment(n.value)}function reduce(){countStore.sum-=n.value}
</script><style scoped>.count {width: 900px;height: 250px;border-radius: 10px;box-shadow: 0 0 10px;background-color: skyblue;margin:20px;padding:10px;}button {margin-left:5px;margin-right:5px;width: 60px;height: 30px;}
</style>

在src下新建store文件夹：

//store/Count.ts:
import {defineStore} from "pinia"
export const useCountStore=defineStore("count",{  //第一个参数最好和文件名保持一致actions:{increment(value){  //接受传递过来的n.valueif(this.sum<10){// console.log(this) //读取sum，不能写state.sum，作用域不同，不能拿到statethis.sum+=value}}// 当sum加到10不再加},state(){return {sum:6,subject:"Vue3",}}// 知识点三：getters:{bigSum(state){return state.sum*10   //也可以写this.sum*=10}}
})

案例二（$subscribe）

store/Talk.ts:

// 知识点四：$subscribestate(){return {talkList:JSON.parse(localStorage.getItem("talkList") as string) || []}}

组件中：

talkStore.$subscribe((mutate,state)=>{localStorage.setItem("talkList",JSON.stringify(state.talkList))// 将state.talkList转化为字符串存入talkList
})

store组合式写法

//  知识点五：  store组合式写法
import {reactive} from "vue"
export const useTalkStore=defineStore("LoveTalk",()=>{// 数据const talkList=reactive(JSON.parse(localStorage.getItem("talkList") as string) || [])// actions部分：（addtalk函数相当于actions）async function addtalk(){let result=await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")// console.log(result.data)const obj={id:nanoid(),title:result.data.content}// console.log(obj)talkList.unshift(obj)}return {talkList,addtalk}}
)