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

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

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

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

Vuex

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

解決済

Vuexでmutations内の関数に引数を渡したい

bokupiroki
bokupiroki

総合スコア53

Vue.js

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

Vuex

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

1回答

0評価

0クリップ

145閲覧

投稿2022/01/20 09:19

前提・実現したいこと

Vue.jsのVuexを学習中
mutations: { }内に関数を作成している
その関数をVue側から呼び出す際、引数を渡したい
渡す引数は1つだけ

最終的にはvuexのstateの情報を動的に書き換えたい

発生している問題・エラーメッセージ

vueファイルから適当な文字列を引数に入れて渡しても、
vuex側console.logすると意図しない値が出てきます。

該当のソースコード

↓Hoge.vue

javascript

<template> <div id="app"> <h1>{{ $store.state.message }}</h1> <h2>{{ $store.state.email }}</h2> </template> <script> export default { mounted() { this.$store.commit("update"); this.$store.commit("updateUser",'changed@gmail.com') }, computed: { }, methods: { } }; </script>

↓resources\js\store\index.js

javascript

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: { message: '元のメッセージ', email: 'default@gmail.com' }, mutations: { update() { this.state.message = '書き換え後のメッセージ' }, updateUser(fuga) { console.log(fuga)//←この時点でchanged@gmail.comじゃない値が返る var hoge = JSON.parse(JSON.stringify(fuga)) console.log(hoge) this.state.email = hoge } } }, ); export default store;

index.jsのconsole.log(fuga)の時点で、

email: Object
email: "default@gmail.com"
message: "書き換え後のメッセージ"

というオブジェクトが返ってきてしまいます。

Hoge.vueでは、this.$store.commit("updateUser",'changed@gmail.com')と書いているので、
単純に文字列のchanged@gmail.comをindex.js側で受け取れるはずなのでは??
と思うのですが、同index.jsで定義したstateの内容がオブジェクトとして渡されてしまいます。

試したこと

vue側ででmountedの中に書くこと自体がよくないのか?
と考え、computedやmethodsに書いて呼び出すことも試しましたが、結果は同じでした。

そもそも的外れなことをしていたら申し訳ありません。
知恵を貸していただけると幸いです。

補足情報(FW/ツールのバージョンなど)

Vue2

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vuex

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