権兵衛(@Gonbee_audio)です。

今回もインターンで学んだことをアウトプットがてらに投稿していこうと思います。

開発環境

mac os Catalina
vue-cli ３系
node.js v13.6.0

下準備

先にcomponentsmファイルの中にform.vue、vuexにデータを格納するためのインスタンス(store.js)をsrc直下に作っていきます。

/src/components/form.vue


<template>
<div>
<form>
  <label for="exampleInputMessage">メッセージ</label>
  <p><input type="text" v-model="form.textdefault" name="text" class="textForm"></p>
  <label for="exampleInputPassword">パスワード</label>
  <p><input type="password" v-model="form.defaultpassword" name="password"></p>
  <p><input type="submit" value="送信"></p>
</form>
</div>
</template>

<script>
export default{
  data () {
    return {
    form: {
      textdefault: '入力して下さい',
      defaultpassword: '',
      }
    }
  },
}
</script>

src直下にstore.jsを作ります。

/src/store.js


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    text: '',
    password: '',
    },
    mutations:{
        setText(state, strText){
            state.text = strText;
        },
        setPassword(state, strPassword){
            state.password = strPassword;
        },
    },
    actions:{
            setText(context, strText){
                context.commit('setText', strText);
            },
            setPassword(context, strPassword){
                context.commit('setPassword', strPassword);
            }
    },

})

今回はこのように作りました。

Vuexで複数のデータをformタグを括ってactionsとsubmitを使いを同時に受け取る方法

では本題に入っていきます。

formタグに
v-on要素として @submit.prevent="updatefunc"
送信後のページ遷移のパスを指定するために　action="/"
をそれぞれ記載します

@submitにprevent拡張子をつけることによってpostプロトコルで送信することを防ぎます。

template


<template>
<div>
<form @submit.prevent="updatefunc" action="/>
  <label for="exampleInputMessage">メッセージ</label>
  <p><input type="text" v-model="form.textdefault" name="text" class="textForm"></p>
  <label for="exampleInputPassword">パスワード</label>
  <p><input type="password" v-model="form.defauitpassword" name="password"></p>
  <p>チェックボックス<input type="checkbox" v-model="form.checkboxdefault" ></p>
  <p>ラジオボタン<input type="radio" v-model="form.radiodefault" ></p><br>
  <p><input type="submit" value="送信"></p>
</form>
</div>
</template>

このようになると思います

次にtemplateからデータを受け取るvueを書いていくのですが、いろんな記事でよく書いてあるのがコレ

this.$store.dispatch("setText", event.target.value)

第二引数がこのままだと同じタグにあるvalueの値をstore.jsに持っていくことになるので、formタグにあるvalueを送信するということになってしまいます。

なので、このように書きます。

form.vue



<script>
  methods: {
      updatefunc (event) {
         this.$store.dispatch("setText", event.target.text = this.form.textdefault),
         this.$store.dispatch("setPassword", event.target.password = this.form.defaultpassword)
      }
  }
</script>

こう書くことで、htmlに書いてあるtextやpasswordを受け取り。それをsotre.jsに送ることが可能です。

完成形がこちらです。

form.vue


<template>
<div>
<form @submit.prevent="updatefunc" action="/">
  <label for="exampleInputMessage">メッセージ</label>
  <p><input type="text" v-model="form.textdefault" name="text" class="textForm"></p>
  <label for="exampleInputPassword">パスワード</label>
  <p><input type="password" v-model="form.defaultpassword" name="password"></p>
  <p><input type="submit" value="送信"></p>
</form>
</div>
</template>

<script>
export default{
  data () {
    return {
    form: {
      textdefault: '入力して下さい',
      defaultpassword: '',
      }
    }
  },
  methods: {
      updatefunc (event) {
         this.$store.dispatch("setText", event.target.text = this.form.textdefault),
         this.$store.dispatch("setPassword", event.target.password = this.form.defaultpassword)


      }
  }
}
</script>