状態管理(store)でdispatchを実行しても値が反映されない


#1

はじめまして。
はじめてvue.jpを使ってみようといろいろ触り始めたビギナーなのですが、
状態管理の値が更新されず、お手上げとなり、
皆さまのお知恵を拝借できればとトピックを上げました。
環境は、electron-vueをインストールして、Visual Studio Code でプログラムを作っています。

□Test.vue --------------------------------------

message > {{message}}
日付更新
/* CSS */

□store/test.js ---------------------------------

const state = {
// メッセージ
message: ‘1900-01-01’
}
const mutations = {
setMessage (state, message) {
state.seldate = message
}
}
const getters = {
getMessage (state) {
return state.message
}
}
const actions = {
updateMessage ({ commit }, message) {
commit(‘setMessage’, message)
}
}
export default {
state,
mutations,
getters,
actions
}

□起動時の画面 ----------------------------------

message > 1900-01-01
[日付更新]

上記の状態で「日付更新」のボタンを押しても画面上の日時が更新されません。
ディフォルトの日付は表示されているので、getters.getMessageは動いてるのですが、
セットするときのthis.$store.dispatch(‘updateMessage’, dt)が反応していないようです。

何か書き方がまずいのでしょうか?
ヒントだけでもいただければ助かります。

ご指導よろしくお願いいたします。

普段はC#を触っているのですが、WEB系のプログラムは初めてです。


#2

申し訳ありません。Test.vueの内容が間違って出していました。
以下のように組んでいます。

<template>
<div id=“test”>
message > {{message}}<br>
<button @click=“clickTest”>[日付更新]</button>
</div>
</template>

<script>
export default {
name: ‘test’,
computed: {
message: function () {
return this.$store.getters.getMessage
}
},
methods: {
clickTest: function () {
var dt = new Date()
this.$store.dispatch(‘updateDate’, String(dt))
}
}
}
</script>

<style>
/* CSS */
</style>


#3

自己レスになります。

やっと原因が見つかりました。

他の方の参考になれば。
見ていただいてありがとうございました。