關(guān)于vue3 vuex4 store的響應(yīng)式取值問題解決
更新時(shí)間：2022年08月25日 11:59:34 作者：最愛小蝦
這篇文章主要介紹了vue3 vuex4 store的響應(yīng)式取值問題，在實(shí)際生活中遇到這樣一個(gè)問題:在頁面中點(diǎn)擊按鈕,數(shù)量增加,值是存在store中的,點(diǎn)擊事件值沒變,如何解決這個(gè)問題，本文給大家分享解決方法，需要的朋友可以參考下
場(chǎng)景：
在頁面中點(diǎn)擊按鈕，數(shù)量增加，值是存在store中的，點(diǎn)擊事件，值沒變。
<script setup lang="ts">
import { useStore } from '@/vuex';
const store = useStore()
const onSubmit = () => {
store.dispatch("incrementAction", 1);
}
let count = store.state.count
</script>
<template>
<h1 @click="onSubmit">{{ count }}</h1>
</template>原因：store.state.count錯(cuò)誤的取值方式，雖然可以取出，但是喪失了響應(yīng)式,也就是觸發(fā)increment事件時(shí)候，count的值不會(huì)變化
解決：
<script setup lang="ts">
import { useStore } from '@/vuex';
import {computed} from 'vue'
const store = useStore()
const onSubmit = () => {
store.dispatch("incrementAction", 1);
}
let num = computed(() => store.state.count)
</script>
<template>
<h1 @click="onSubmit">{{ count }}</h1>
<h1>{{$store.state.count}}</h1>
</template>或者，標(biāo)簽中用$store.state.count也能取得響應(yīng)式的值。
到此這篇關(guān)于vue3 vuex4 store的響應(yīng)式取值的文章就介紹到這了,更多相關(guān)vue3 vuex4取值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解
這篇文章主要介紹了Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue-seamless-scroll 實(shí)現(xiàn)簡單自動(dòng)無縫滾動(dòng)且添加對(duì)應(yīng)點(diǎn)擊事件的簡單整理
vue-seamless-scroll是一個(gè)基于Vue.js的簡單無縫滾動(dòng)組件, 基于requestAnimationFrame實(shí)現(xiàn),配置多滿足多樣需求，目前支持上下左右無縫滾動(dòng)，單步滾動(dòng)，及支持水平方向的手動(dòng)切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實(shí)現(xiàn)自動(dòng)無縫滾動(dòng)的效果，并對(duì)應(yīng)添加點(diǎn)擊事件2023-01-01
Token是身份驗(yàn)證后服務(wù)端返回的令牌,常用于訪問授權(quán)API和頁面權(quán)限校驗(yàn),Token數(shù)據(jù)可存儲(chǔ)在本地或Vuex中,本地存儲(chǔ)可實(shí)現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue登錄成功之后的token處理詳細(xì)步驟,需要的朋友可以參考下2024-10-10
這篇文章主要為大家詳細(xì)介紹了一些vue使用axios的小技巧,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)
這篇文章主要介紹了vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
今天小編就為大家分享一篇Vue引用Swiper4插件無法重寫分頁器樣式的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue初嘗試--項(xiàng)目結(jié)構(gòu)(推薦)
這篇文章主要介紹了vue初嘗試--項(xiàng)目結(jié)構(gòu)的相關(guān)知識(shí),需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue組件間通信解析，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
最近在做一個(gè)類似課程表的需求,需要自制一個(gè)日歷來支持功能及展現(xiàn),就順便研究一下應(yīng)該怎么開發(fā)日歷組件,下面這篇文章主要給大家介紹了關(guān)于如何基于vue2實(shí)現(xiàn)一個(gè)日歷組件的相關(guān)資料,需要的朋友可以參考下2022-12-12