シナリオ:
ページ上のボタンをクリックすると数量が増加し、値がストアに保存されます。ボタンをクリックしても値は変わりません。
1 2 3 4 5 6 7 8 9 10 11 | <script setup lang= "ts" >
import { useStore } from & #39;@/vuex';
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';
import {computed} from & #39;vue'
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 サイトの他の関連記事を参照してください。