vuexにてテキストボックスに入力された値を、ボタンがクリックされたときにvuexに入れる方法について

Question

vuexを使用して、textボックスに入力された値を、ボタンがクリックされたときにvuexに入れ、それを表示させたいです。
現在、以下のように書きました。

<template>
  <div>
    <input type="text" v-model="comment" id="comment">
    <input type="button" value="追加"  @click="updateComment">
  </div>
</template>

<script>
export default {
  computed:{
    comment(){
      return this.$store.state.comment;
    }
  },
  methods: {
    updateComment(comment){
      this.$store.commit('updateComment',comment.value)
      console.log(this.updateComment)
    }
  },
}
</script>

export default new Vuex.Store({
  state: {
    comment: "",
  },
  mutations: {
    updateComment(state, comment) {
      state.comment = comment
    },
  },
})

このように書いたのですが、 vueファイルのupdateCommentでtextボックスに入力された値を選択し、出力する方法がわからないです
ご教授お願いします

Answer 1

Vuexのstateを変更する際には少し注意が必要です。commitを通してやらなければなりません。
下記のようにcomputeのcommentをv-modelに設定すると
this.$store.state.commentに新しい値を直接代入する形になってしまうのでダメです。
（なぜダメかはそんなに詳しくないです、、）

<input type="text" v-model="comment" id="comment">

computeのcommentを下記のように変更すると、追加ボタンなしに双方向バインディングできます。
（個人的な意見ですが、あまり同じ変数名や関数名を命名しないほうがわかりやすいと思います）

stateComment: {
  get(){
    return this.$store.state.comment;
  },
  set(val){
    this.$store.commit('updateComment',val)
  }
}
      

getで値を表示や取得するときの処理
setで値が代入されたときの処理

もし、追加ボタンが押されたときのみstate.commentにバインディングされてほしい場合は、
vueの変数に一時的に双方向バインディングして、methodのupdateCommentに引数として渡してやりましょう。

<input type="text" v-model="tmp_val" id="comment">
<input type="button" value="追加"  @click="updateComment(tmp_val)">

data(){
  return{
    tmp_val:"",
  }
}

Comments

[cyacya.0325]

```
<input type="text" v-model="addcomment">
<input type="button" value="追加" @click="updateComment(addcomment)">

data() {
return {
addcomment:'',
}
},
computed:{
comment(){
return this.$store.state.comment;
}
},
methods: {
updateComment(){
this.$store.dispatch('updateComment')
}
},
```
このようにしたのですが、動かないのですが、どこが間違っているのでしょうか？

[cyacya.0325]

store.jsは
```
state: {
comment: "",
},
mutations: {
updateComment(state, comment) {
state.comment = comment
},
},
actions: {
updateComment(context) {
context.commit('updateComment')
}

}
```
このようにしています

[momochi]

dispatchはあまり使ったことがないのであっているかわかりませんが、

まずはじめに、methodsのupdateCommentに引数がありません。
dispatchのサンプルを見た限り、
dispatchの第2引数に値を入れる必要があると思います。
また、actionsのcommitの第２引数にも値を入れる必要があります。

methods: {
updateComment(val){
this.$store.dispatch('updateComment',val)
}

actions: {
updateComment(context) {
context.commit('updateComment', context)
}

[cyacya.0325]

早い返信ありがとうございます
dispatch以外で方法があるのですか？

[momochi]

dispatchでactionを通してcommitするのが正しいのかわかりませんが、
methods: {
updateComment(val){
this.$store.commit('updateComment',val)
}
で、stateは変更されると思います

[cyacya.0325]

ありがとうございます