前提・実現したいこと
Vuexについて学習しています。
Mutationsに複数の関数を使用しましたが、どれも似たような処理なので、一つの関数にまとめたいです。
該当のソースコード
JavaScript
1import Vue from 'vue'; 2import Vuex from 'vuex'; 3 4Vue.use(Vuex) 5 6export default new Vuex.Store({ 7 state: { 8 gender: '', 9 year: '2020', 10 comment: '' 11 }, 12 mutations: { 13 setGender(state, gender) { 14 state.gender = gender 15 }, 16 setYears(state, year) { 17 state.year = year 18 }, 19 setComment(state, comment) { 20 state.comment = comment 21 } 22 } 23})
Vue
1<template> 2 <div> 3 <h3>Home</h3> 4 5 6 <p>性別</p> 7 <input 8 type="radio" 9 id="male" 10 name="gender" 11 value="男性" 12 v-model="gender" 13 > 14 <label for="male">男性</label> 15 <input 16 type="radio" 17 id="female" 18 name="gender" 19 value="女性" 20 v-model="gender" 21 > 22 <label for="female">女性</label> 23 24 25 <p>生年</p> 26 <select v-model="year"> 27 <option 28 v-for="year in years" 29 :key="year">{{ year }}</option> 30 </select> 31 32 33 <p>コメント</p> 34 <input type="text" v-model="comment"> 35 36 <router-link to="/users">usersへ</router-link> 37 </div> 38</template> 39 40<script> 41export default { 42 data() { 43 return { 44 years: ['2018', '2019', '2020'], 45 } 46 }, 47 computed: { 48 gender: { 49 get() { 50 return this.$store.state.gender; 51 }, 52 set(value) { 53 this.$store.commit('setGender', value); 54 } 55 }, 56 year: { 57 get() { 58 return this.$store.state.year 59 }, 60 set(value) { 61 this.$store.commit('setYears', value) 62 } 63 }, 64 comment: { 65 get() { 66 return this.$store.state.comment 67 }, 68 set(value) { 69 this.$store.commit('setComment', value) 70 } 71 } 72 } 73} 74</script>
Vue
1<template> 2 <div> 3 <h3>Users</h3> 4 5 <p>{{ $store.state.gender }}</p> 6 <p>{{ $store.state.year }}</p> 7 <p>{{ $store.state.comment }}</p> 8 <router-link to="/">Homeへ</router-link> 9 </div> 10</template>
試した事
- Mutations内の関数の引数を思いつくだけ取っ替え引っ替え
- 関数内の処理を取っ替え引っ替え
自分の考え
どこかのサイトに「引数に渡って来た値だけstateにセットするイメージ」と書いていたので、それができれば実現できると考えます。
しかし、書いている意味がよく分からず実現できません。
よろしくお願いいたします。
あなたの回答
tips
プレビュー