【Vuex】フォームの入力値をストアする2つの方法

(1)valueと@inputを使う

<input :value="message" @input="updateMessage">
 
computed: {
    message() {
        return this.$store.getters.message;
},
methods: {
    updateMessage(e) {
        this.$store.dispatch('updateMessage', e.target.value);
}
// 入力→methods→actions→mutationsの順に入力値(e.target.value)が渡される

(2)v-modelを使う

<input v-model="message">
 
computed: {
    message: {
        get() {
            return this.$store.getters.message;
        },
        set(value) {
            this.$store.dispatch('updateMessage', value);
        }
    }
}