Vuexを使用して、値の変更を行いたい

現在携わっているプルジェクトでもVuexを使用しているのですが、
なんとか技術を身につけたいと思い、下記のサイトを参考にサンプルを作成してみました。

テキストフィールドの中に、文字列を入れると、その値がＶｕｅｘの中でセットされて、
画面に表示される仕組みです。
しかし、現状、入れた文字が表示されておりません。

まず、コンソール画面を確認すると、下記のようなエラーメッセージが出ております。
【エラーメッセージ】
[vuex] unknown local action type: updateName, global type: user/updateName

そして、user.tsとして、Ｖｕｅｘを記述するファイルは下記のように書いています。

Typescript
1import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
2@Module({ namespaced: true, name: 'test' })
3class User extends VuexModule {
4  public name: string = ''
5  @Mutation
6  public setName(newName: string): void {
7    this.name = newName
8  }
9  @Action
10  public updateName(newName: string): void {
11    this.context.commit('setName', newName)
12  }
13}
14export default User

デコレーターを使用している部分に’User’,'setName','updateName'のところに
’experimentalDecorators’をtrueにしないさいというエラーメッセージが出ておりますが、
tsconfig.jsの該当箇所はtrueとなっております。

参考資料のindex.tsの部分は理解することができなかったのですが、
同じように記載しております。今回はutilsというファイルを作成し、
そちらに格納しました。

Typescript
1import  Vue from "vue";
2import Vuex from "vuex";
3import User from "../store/user";
4Vue.use(Vuex)
5const store = new Vuex.Store({
6    modules:{
7        User
8    }
9})
10export default store

そして最後に、vueファイルです。

Vue
1<template>
2  <div class="details">
3    <div class="username">User: {{ nameUpperCase }}</div>
4    <v-text-field filled rounded :value="name" @keydown="updateName($event.target.value)" />
5  </div>
6</template>
7<script lang="ts">
8import { Component, Vue } from 'vue-property-decorator'
9import { namespace } from 'vuex-class'
10const user = namespace('user')
11@Component({})
12export default class User extends Vue {
13  @user.State
14  public name!: string
15
16  @user.Getter
17  public nameUpperCase!: string
18
19  @user.Action
20  public updateName!: (newName: string) => void
21}
22</script>

なんとか調べながらやっておりますが、なかなか理解することができず、
非常に困っております。
どなたかご教示いただけませんでしょうか？

dameo

2020/08/31 06:58

順を追って覚えればいいのではないかと思います。もともとJavaScriptもTypeScriptもHTMLも分かっている方であれば、いきなりそのコードを見てもスッと入ってくると思いますが、そうでない方は、まずはVue単体でHTMLの簡単なのを試して頂き、次にvue-cliを使ったvueの書き方に慣れて頂き、簡単なのを書けるようになったらTypeScriptで普通の書き方に慣れていただき、それも終わったらTypeScriptでのクラス表記(+decorator)に慣れていただき、最後にVuexを加えれば、当該コードも理解出来ると思います。