快捷導(dǎo)航

vue3中storeToRefs讓store中的結(jié)構(gòu)出來的數(shù)據(jù)也能變成響應(yīng)式(推薦)

更新時間：2024年09月27日 11:45:10 作者：jjw_zyfx

這篇文章主要介紹了vue3中storeToRefs讓store中的結(jié)構(gòu)出來的數(shù)據(jù)也能變成響應(yīng)式,本文通過實(shí)例代碼給大家介紹的分需要的朋友可以參考下

2、創(chuàng)建 src/stores/counter.js 文件，其內(nèi)容如下：

import {defineStore} from "pinia";
import {ref} from "vue";
export const useCounterStore = defineStore('counter',()=>{
    const count = ref(0)
    const increment = ()=>{
        count.value++
    }
    return{
        count,
        increment
    }
})

3、在.vue中進(jìn)行驗(yàn)證

<script setup>
import {useCounterStore} from "@/stores/counter.js";
import {storeToRefs} from "pinia";
const counterStore = useCounterStore()
const {count} = storeToRefs( counterStore)
// 注意函數(shù)不能用storeToRefs 否則結(jié)構(gòu)出來的不是響應(yīng)式
const { increment } = counterStore
</script>
<template>
  <div>
    <button @click="counterStore.increment">按鈕</button>
  </div>
  <h1>{{counterStore.count}}</h1>
  <div>
    <button @click="increment">按鈕</button>
  </div>
  <h1>{{count}}</h1>
</template>
<style scoped>
</style>

實(shí)驗(yàn)結(jié)果如下：

在這里插入圖片描述

注意

const {count} = counterStore   這種方式將變量解構(gòu)出來的count不是響應(yīng)式的
const {increment } = storeToRefs( counterStore)  同樣這種方式將函數(shù)解構(gòu)出來的也不是

到此這篇關(guān)于vue3中storeToRefs讓store中的結(jié)構(gòu)出來的數(shù)據(jù)也能變成響應(yīng)式的文章就介紹到這了,更多相關(guān)vue storeToRefs響應(yīng)式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

關(guān)于vue3 vuex4 store的響應(yīng)式取值問題解決

相關(guān)文章

vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
vue大屏展示適配的方法
這篇文章主要為大家詳細(xì)介紹了vue大屏展示適配，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
vue通過vue-lazyload實(shí)現(xiàn)圖片懶加載的代碼詳解
這篇文章主要給大家介紹了vue通過vue-lazyload實(shí)現(xiàn)圖片懶加載,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02
Vue2的路由和異步請求方式
這篇文章主要介紹了Vue2的路由和異步請求方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue生命周期詳解
這篇文章詳細(xì)介紹了Vue的生命周期，文中通過代碼示例介紹的非常詳細(xì)。對大家的學(xué)習(xí)有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
Vite進(jìn)階常用插件詳解與使用完整指南
Vite作為現(xiàn)代構(gòu)建工具,Vite已經(jīng)解決了前端工具鏈中最困難的部分,極速HMR、原生ESM、干凈的插件API,以及生產(chǎn)級打包能力,這篇文章主要介紹了Vite進(jìn)階常用插件詳解與使用完整指南的相關(guān)資料,需要的朋友可以參考下
2026-02-02
vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題
這篇文章主要介紹了vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
vue通過點(diǎn)擊事件讀取音頻文件的方法
最近做項(xiàng)目遇到這樣的一個需求，通過select元素來選擇音頻文件的名稱，點(diǎn)擊按鈕可以進(jìn)行試聽。接下來通過本文給大家介紹vue項(xiàng)目中通過點(diǎn)擊事件讀取音頻文件的方法,需要的朋友可以參考下
2018-05-05
vue生成隨機(jī)驗(yàn)證碼的示例代碼
本篇文章主要介紹了vue生成隨機(jī)驗(yàn)證碼的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧‘
2017-09-09
Vue3實(shí)現(xiàn)拖拽圖片四角調(diào)整圖片大小的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實(shí)現(xiàn)拖拽圖片四角調(diào)整圖片大小的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-10-10