Vuexのstateをv-modelで使う際について

Question

Vuexのstateをv-modelで使う際に、フォームの入力について下記の公式リファレンスを参考にしました。

https://vuex.vuejs.org/ja/guide/forms.html

ここで質問ですが、mapMutationsを使ってcommitの部分を書き換えることは可能でしょうか？

下記に現在作成途中のアカウント新規登録画面のコード添付します。

<template>
<div class="signup">
  <h2>新規登録</h2>
  <input type="text" placeholder="Username" v-model="updateUsername">
  <input type="text" placeholder="email" v-model="updateEmail">
  <input type="password" placeholder="Password" v-model="updatePassword">
  <button @click="signUp({email, password})">登録する</button>
</div>
</template>

<script>
import {
  username,
  email,
  password
} from '../store/index.js'
import {
  mapGetters
} from 'vuex'
import {
  mapMutations
} from 'vuex'

export default {
  name: 'Signup',
  data() {
    return {
      username,
      email,
      password
    }
  },
  methods: {
    ...mapMutations([
      'signUp'
    ])
  },
  computed: {
    ...mapGetters([
      'getUsername',
      'getEmail',
      'getPassword'
    ]),
    updateUsername: {
      get() {
        return this.getUsername
      },
      set(value) {
        this.$store.commit('updateUsername', value) //ここをmapMutationsを用いてthis.updateUsername(value)としたい。以下の2つの算出プロパティについても同じ。
      }
    },
    updateEmail: {
      get() {
        return this.getEmail
      },
      set(value) {
        this.$store.commit('updateEmail', value)
      }
    },
    updatePassword: {
      get() {
        return this.getPassword
      },
      set(value) {
        this.$store.commit('updatePassword', value)
      }
    }
  }
}
</script>

<style scoped>
input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font: 16px/24px sans-serif;
  width: 230px;
  padding: 10px 0;
  margin: 10px auto;
  border: none;
  border-bottom: 1.5px solid #1b2538;
}

input:focus {
  border-bottom: 1.5px solid #da3c41;
  outline: none;
  transition: .5s;
}

button {
  color: #FFF;
  background-color: #1da1f3;
  border-radius: 20px;
  display: inline-block;
  margin: 10px auto;
  height: 40px;
  width: 120px;
  font-size: 16px;
  border: none;
}

button:active {
  background-color: #36c;
}

button:focus {
  outline: 0px;
}
</style>

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    username: '',
    email: '',
    password: ''
  },
  getters: {
    getUsername: state => state.username,
    getEmail: state => state.email,
    getPassword: state => state.password
  },
  mutations: {
    signUp({ email, password }) {
      firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then(user => {
          alert('Create account: ' + user.user.email)
        })
        .catch(error => {
          alert(error.message)
        })
    },
    updateUsername(state, value) {
      state.username = value
    },
    updateEmail(state, value) {
      state.email = value
    },
    updatePassword(state, value) {
      state.password = value
    }
  },
  actions: {},
  modules: {}
})

Comments

[plasticgrammer]

> commitの部分を書き換える
この表現について補足をお願いします。
具体的にどのようなコードをイメージしているのか教えてください。（もしくは、どのようなことを実現させたいのかを教えてください）

[yusuke.y]

投稿内容を修正しました。

Answer 1

見当外れな回答でしたらすみません。
上書きでなく、単純にget/setを実装すれば良いだけではないでしょうか。

computed: {
  message: {
    get() {
      return this.$store.state.obj.message
    },
    set(value) {
      this.updateMessage(value)
    }
  }
}

Comments

[yusuke.y]

this.updateMessage(value) is not functionでエラーが返ってきます。

今、作成途中のコードを掲載しましたのでご覧ください。
updateUsername、updateEmail、updatePasswordの三つの算出プロパティのset関数にあるthis.$store.commit(~~~~)をmapMutationsを用いたthis.updateUsernameにするとis not functionのエラーを吐きます。

[plasticgrammer]

methodsにあるmapMutationsにはsignUpのみですが、ここにupdateUsername等を加えてもダメなのでしょうか？
上記をやりたくないということなのでしょうか？