简易化解vue3中store存储与使用的响应式问题

今日在写网站的时候遇见一个大坑,在使用vue3渲染数据的时候发现,在先取store后,又有了修改store中的数据时出现的没有预想的响应式更改

那么我有了一下步骤

1. 从存储段设置log,探查是否真正存储到了数据(因为网页版的vue插件有一些bug,不能全靠它来观察数据变化)

2. 发现存储没有问题,再次探查数据获取端,发现获取端的数据为空,但是存在
   反思:确实有创建此数据,经此发现store并无大问题

3.反思一下逻辑,整个逻辑确实出现了先获取数据再修改数据的问题

那么思路清晰了,就是解决获取端的数据相应问题嘛

先说结论:

无非获取的是响应式数据,我们确保store中使用ref或 reactive 来创建数据对象后

在获取端只使用 storeToRefs解构出数据,然后用computed解决计算数据的响应式化问题即可

本次错误的代码

store:

import { defineStore } from "pinia"
import {ref} from "vue"

export const useCartStore=defineStore("cart",()=>{
    const cartList=ref([])

    const cartListAdd=(data)=>{
       const item = cartList.value.find((item)=>data.skuId==item.skuId)
       if(item!=null&&item!=""){
        item.count+=data.count;
       }else{
        cartList.value.push(data)
        console.log("eye",cartList.value);
       }

    }
    return{
        cartList,cartListAdd
    }
})

获取端:

<script setup> 
// import {getCategoryAPI} from "/src/apis/layout.js"
import {ref, onMounted } from "vue"
import { useCategoryStore } from "@/stores/category";
import { storeToRefs } from "pinia";
import { useCartStore } from "@/stores/cart";
const {dataList}=storeToRefs(useCategoryStore());
const num=ref(0)
const cartStore =(useCartStore());
if(cartStore!=null&&cartStore.cartList.value.length!=null&&cartStore.cartList.value.length!=""){
    num.value=storeToRefs(cartStore.cartList.value.length);
}else{
    num.value=0
}
onMounted(()=>{

})

现象是num和cartStore中的都没有响应式化

解决办法:

针对cartStore中的cartList,他在store中是有定义的,我们用storeToRefs来解决响应式化的问题

针对num他是计算得来的,我们用computed来进行响应式计算

<script setup> 
// import {getCategoryAPI} from "/src/apis/layout.js"
import {ref, onMounted,computed } from "vue"
import { useCategoryStore } from "@/stores/category";
import { storeToRefs } from "pinia";
import { useCartStore } from "@/stores/cart";
const {dataList}=storeToRefs(useCategoryStore())
const {cartList} =storeToRefs(useCartStore());
const num = computed(() => cartList.value.length);
onMounted(()=>{
})