count的值怎么不显示 <template> <div> <h3>当前最新的count值为：{{ count }}</h3> <button @click="btnHandler1">+1</button> <button @click="btnHandler2">+N</button> <button @click="btnHandler3">+1 Async</button> <button @click="btnHandler4">+N Async</button> </div> </template> <script> // import {mapState} from 'vuex' export default { data(){ return{ count:'' } },methods:{ btnHandler1(){ this.$store.commit('add') }, btnHandler2(){ this.$store.commit('addN',3) }, btnHandler3(){ this.$store.dispatch('addAsync') }, btnHandler4(){ this.$store.dispatch('addNAsync',3) } } } </script>

count 的值可能不显示是因为当前组件没有引用 vuex 中的 state 中的 count 变量。可以尝试在组件中引入 Vuex 的 mapState 辅助函数，然后在模板中使用该函数映射 state 中的 count 变量，如下所示：

<template>
<div>
<h3>当前最新的count值为：{{ count }}</h3>
<button @click="btnHandler1">1</button>
<button @click="btnHandler2">N</button>
<button @click="btnHandler3">1 Async</button>
<button @click="btnHandler4">N Async</button>
</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['count']),
},
methods: {
btnHandler1() {
this.$store.commit('add');
},
btnHandler2() {
this.$store.commit('addN', 3);
},
btnHandler3() {
this.$store.dispatch('addAsync');
},
btnHandler4() {
this.$store.dispatch('addNAsync', 3);
},
},
};
</script>