ホームページ > ウェブフロントエンド > Vue.js > vue3 vuex4 ストアの応答値の問題を解決する方法

vue3 vuex4 ストアの応答値の問題を解決する方法

WBOY
リリース: 2023-05-29 18:55:12
転載
1470 人が閲覧しました

シナリオ:

ページ上のボタンをクリックすると数量が増加し、値がストアに保存されます。ボタンをクリックしても値は変わりません。

1

2

3

4

5

6

7

8

9

10

11

<script setup lang="ts">

import { useStore } from &#39;@/vuex&#39;;

const store = useStore()

const onSubmit = () => {

  store.dispatch("incrementAction", 1);

}

let count = store.state.count

</script>

<template>

  <h2 @click="onSubmit">{{ count }}</h2>

</template>

ログイン後にコピー

原因: store.state.count の値が間違っています。取り出すことはできますが、応答性が失われます。つまり、increment イベントがトリガーされても、count の値は変わりません。

解決策 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<script setup lang="ts">

import { useStore } from &#39;@/vuex&#39;;

import {computed} from &#39;vue&#39;

const store = useStore()

const onSubmit = () => {

  store.dispatch("incrementAction", 1);

}

let num = computed(() => store.state.count)

</script>

 

<template>

  <h2 @click="onSubmit">{{ count }}</h2>

  <h2>{{$store.state.count}}</h2>

</template>

ログイン後にコピー

あるいは、タグ内で $store.state.count を使用して応答性の値を取得します。

以上がvue3 vuex4 ストアの応答値の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:yisu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート