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