《Vue3学习手记5》

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中所有数据都变成响应式，最好使用storeToRefs
    
    const {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.ts
        countStore.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.value
            if(this.sum<10){
                // console.log(this) //读取sum，不能写state.sum，作用域不同，不能拿到state
                this.sum+=value
            }
        }
        // 当sum加到10不再加
        
    },
    state(){
        return {
            sum:6,
            subject:"Vue3",
        }
    }
     // 知识点三：
    getters:{
        bigSum(state){
            return state.sum*10   //也可以写this.sum*=10
        }
    }
})  

案例二（$subscribe）

store/Talk.ts:

// 知识点四：$subscribe
    state(){
        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}
    }
)