Vue3，Vuex 不更新 DOM 元素

Question

我正在尝试使用 Vue3 和 Vuex 制作一个简单的计数器应用程序。
这可能是一个简单的问题，因为我是 Vue 的新手。

我通过 Vue 开发工具和控制台检查了 Vuex 突变是否正常工作。
当我点击增加按钮时它会增加计数器。
但是，我找不到我的 DOM 没有更新的原因。

任何简单的回答都会对我有很大的帮助

这是我的代码

// App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div class="counter">
    {{$store.state.counter}}
  </div>
  <div class="buttons">
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'App',
  data() {
    return {
      // counter: 0
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    }
  },
  computed: {
    ...mapState(['counter'])
    // counter() {
    //   // return this.$store.state.counter
      
    // }
  }
}
</script>

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'

createApp(App).use(store).mount('#app')

// store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    counter: 0
  },
  mutations: {
    increment(state) {
      state.counter++
      console.log(state.counter)
    },
    decrement(state) {
      state.counter--
      console.log(state.counter)
    }
  }
})

Answer 1

估计是 Vue3 的问题。我安装了 vuex alpha 版本，在我的本地电脑上运行。

npm i vuex@4.0.0-alpha.1

Vue3，Vuex 不更新 DOM 元素

Vue3, Vuex does not update DOM element

javascript

vuex

vuejs3