關(guān)于vue3 vuex4 store的響應(yīng)式取值問題解決
更新時間：2022年08月25日 11:59:34 作者：最愛小蝦
這篇文章主要介紹了vue3 vuex4 store的響應(yīng)式取值問題，在實際生活中遇到這樣一個問題:在頁面中點擊按鈕,數(shù)量增加,值是存在store中的,點擊事件值沒變,如何解決這個問題，本文給大家分享解決方法，需要的朋友可以參考下
場景：
在頁面中點擊按鈕，數(shù)量增加，值是存在store中的，點擊事件，值沒變。
<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錯誤的取值方式，雖然可以取出，但是喪失了響應(yīng)式,也就是觸發(fā)increment事件時候，count的值不會變化
解決：
<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>或者，標簽中用$store.state.count也能取得響應(yīng)式的值。
到此這篇關(guān)于vue3 vuex4 store的響應(yīng)式取值的文章就介紹到這了,更多相關(guān)vue3 vuex4取值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue拖拽組件 vuedraggable API options實現(xiàn)盒子之間相互拖拽排序
這篇文章主要介紹了vue拖拽組件 vuedraggable API options實現(xiàn)盒子之間相互拖拽排序克隆clone，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
在Vue中，修飾符處理了許多DOM事件的細節(jié)，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理2022-10-10
下面小編就為大家分享一篇vue element-ui table表格滾動加載方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue Element UI 中 el-table 樹形數(shù)據(jù)
這篇文章主要介紹了Vue Element UI 中 el-table 樹形數(shù)據(jù) tree-props 多層級使用避坑指南,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
下面小編就為大家?guī)硪黄赩ue過渡狀態(tài)實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue項目依賴檢查depcheck問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要給大家介紹了關(guān)于vue中插槽slot的理解和使用方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
現(xiàn)在的短信驗證碼一般為4位或6位，則頁面中會相應(yīng)的顯示4個或6個文本框.好多網(wǎng)站需求都有此功能，今天小編給大家分享基于vue.js實現(xiàn)移動端短信驗證碼功能，需要的朋友參考下吧2017-03-03
本文主要介紹了關(guān)于electron打包的坑，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
本文主要介紹了Vue3 將組件手動渲染到指定元素中的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04