Vuexでstateの変更がDOMに反映されない

Question

前提・実現したいこと

Vuexのstateの値をcomponentで変更した際に、変更した内容をリアルタイムにDOMに反映したい。

環境

• Vue 3
• WSL2 + Docker

npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.6 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.13 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.13 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-vuex:  4.5.13 
    @vue/cli-service: ~4.5.0 => 4.5.13 
    @vue/cli-shared-utils:  4.5.13 
    @vue/compiler-core:  3.0.11 
    @vue/compiler-dom:  3.0.11 
    @vue/compiler-sfc: ^3.0.0 => 3.0.11 
    @vue/compiler-ssr:  3.0.11 
    @vue/component-compiler-utils:  3.2.0 
    @vue/devtools-api:  6.0.0-beta.11 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.11 
    @vue/runtime-core:  3.0.11 
    @vue/runtime-dom:  3.0.11 
    @vue/shared:  3.0.11 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.0.0 => 7.9.0 
    vue: ^3.0.0 => 3.0.11 
    vue-eslint-parser:  7.6.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.7 (16.2.0)
    vue-router: ^4.0.0-0 => 4.0.8 
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.12

解決方法をお聞きしたいこと

下記ソースコードで、画面上の数値がカウントアップされていきませんでした。
mutationsのincrementを呼び出す形にもしてみましたが、結果は同様でした。
また、いずれの場合でもコンソール上ではカウントアップされていることが確認できます。

何故、画面に更新された値が反映されないのでしょうか。また反映させる方法はありますでしょうか。

ソースコード

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

const app = createApp(App)

app.use(store)
app.use(router)
app.mount('#app')

import { createStore } from 'vuex'

export default createStore({
    state: {
        count: 2
    },
    mutations: {
        increment(state) {
            state.count++
        }
    },
    actions: {
    },
    modules: {
    }
})

<template>
  <div class="home">

    <p>{{ count }}</p>
    <p>{{ this.$store.state.count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>

  </div>
</template>

<script>

export default {
  name: "Home",
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
  methods: {
    increment() {
      this.$store.state.count++;
      console.log(this.$store.state.count);
      // this.$store.commit("increment");
    },
    decrement() {
      this.$store.state.count--;
      console.log(this.$store.state.count);
    },
  },
};
</script>

Answer 1

Vueでは、テンプレートの中にthisが代入されることはないですよ。
this.$storeはあくまでプロパティ、メソッド内部での操作です。

<template>
  <div class="home">

    <p>{{ count }}</p>
    <p>{{ state.count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>

  </div>
</template>

Comments

[honyara]

コメントありがとうございます。<p>{{ this.$store.state.count }}</p>に関しては消し忘れでした。

質問がわかりづらくなり申し訳ありませんが、{{ count }}の回数が画面上で変化していかない状態を解決したいと思っています。

[FKM]

メソッドから値を返してないですね。メソッドはあくまで値を計算したり、処理したりするためのものなので、変数の場合返す処理が必要になります。値を動かさないことには算出プロパティは反応しません。
this.count = count
をメソッド末尾に記入してもだめでしょうか。

[honyara]

this.count = this.$store.state.count++;を記入しましたが、「computed property "count" is readonly.」の警告文が表示され、カウントも変化しませんでした。