質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

Q&A

0回答

313閲覧

VuexのMutationsで似たような関数を一つにまとめたい

kazamidori2140

総合スコア9

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

0グッド

0クリップ

投稿2020/09/18 11:14

前提・実現したいこと

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にセットするイメージ」と書いていたので、それができれば実現できると考えます。

しかし、書いている意味がよく分からず実現できません。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuma_kuma_

2020/09/18 23:57

まず基本的になにをさせるかを考えます 「テキストボックスの値が数値なのか」 「必須項目に値が入っているのか」 「コンボボックスは選択されているのか」 「リストボックスは選択されているのか」 等 あとは処理させたいコントロールと必要なら判断基準となる値を引数で渡してあげるのが 基本かと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問