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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

780閲覧

Vue(Nuxt)でvuexを使ってstateの変更を監視し、イベントを発火させたい。

aa316316

総合スコア39

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/03/13 15:20

前提・実現したいこと

現在Vue(Nuxt)でvuexのstateの変更をvueコンポーネントで監視して、stateの状態に応じて対応するメソッドを発火させようとしています。
以下に現状のコードを記載させていただきましたが、stateの変更を監視するためにcomputed...mapGettersを加えたところ、以下のようなエラーが発生してしまっています。

自分でも調べてみましたが、解決方法がわからないためアドバイスいただけますでしょうか。

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

...mapGettersを追記したところ、以下のようなエラーが発生しています。

[Vue warn]: Computed property "entered" was assigned to but it has no setter.
TypeError: Cannot read property 'entered' of undefined

該当のソースコード

vue

1<template> 2 <section class="sample"> 3 <h2>サンプルページ</h2> 4 </section> 5</template> 6 7<script> 8import { mapGetters, mapMutations } from "vuex"; 9 10export default { 11 data() { 12 return {}; 13 }, 14 // 以下computedとwatchでstateの変更を監視 15 computed: { 16 ...mapGetters({ 17 entered: "entered" 18 }) 19 }, 20 watch: { 21 entered(val) { 22 this.flash(); 23 val ? this.enter() : this.leave(); 24 } 25 }, 26 mounted() { 27 // 以下store/index.js内のmutationを発火 28 this.entered(); 29 }, 30 methods: { 31 ...mapMutations({ 32 // this.entered()にマッピング 33 entered: "entered" 34 }), 35 flash() { 36 console.log("flash"); 37 }, 38 enter() { 39 console.log("enter"); 40 }, 41 leave() { 42 console.log("leave"); 43 } 44 } 45}; 46</script> 47 48<style scoped lang="scss"> 49/*スタイルは省略*/ 50</style> 51

store/index.js

javascript

1export const state = () => ({ 2 entered: false 3}); 4 5export const getters = { 6 entered: state => state.entered 7}; 8 9export const mutations = { 10 entered(state) { 11 state.entered = !state.entered; 12 } 13}; 14

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

"nuxt": "^2.4.0",

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

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

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

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

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

teng

2019/03/14 02:23

computedが定義されてるコードも全部あったほうが回答しやすいです
aa316316

2019/03/14 12:53

console.logをだすだけなら上記コードでも動くと考えていたのですが、なにか必要なものがあるのでしょうか、、 以下の記事を参考にアニメーションをしてみたいと思っています。 https://qiita.com/soichiro_nitta/items/8d8ce14fc287aa233ae6 正直vuex、特にmapGettersやmepMutationなどがあまり理解しきれていないため、アドバイス等いただけると大変助かります...!!
guest

回答1

0

ベストアンサー

vue

1computed: { 2 ...mapGetters({ 3 entered: "entered" 4 }) 5},

ここでthis.enteredにstoreのenteredが代入されて、

vue

1methods: { 2 ...mapMutations({ 3 // this.entered()にマッピング 4 entered: "entered" 5 }),

ここでもう一度this.enteredにmutationが代入されます
要は上書きされてしまっているため、諸々おかしくなってますね

getterとmutationはそれぞれわかりやすく名前をつけたほうが良いと思います。
簡単に書き直してみたので、こちら参考にしてみてください

https://codesandbox.io/s/xvrx33099o


ちなみに

vue

1 ...mapGetters({ 2 localName: "storeName" 3 })

は、まあざっくり、this.localName = store.storeNameって意味なので、
storeNameはストアに定義してあるもので固定ですが、localNameの方はthisで使いたい名前を好きにつけて大丈夫です。

vue

1...mapGetters(['storeName1', 'storeName2'])

とすることもできて、その場合はストアで定義した名前と同名でthisに代入されます

公式読んでお勉強しましょう
https://vuex.vuejs.org/ja/guide/getters.html#mapgetters-%E3%83%98%E3%83%AB%E3%83%91%E3%83%BC

ささっと書いたので雑で申し訳ないが、ざっくりこんな感じです
ともにエンジニアとしてガンバリマしょう
何かわからないことがあれば追加でどうぞ、おやすみ、アディオス

投稿2019/03/14 13:35

teng

総合スコア127

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

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

aa316316

2019/03/15 03:39

ありがとうございます! 上記コード参考にさせていただき修正したところ、無事にstateの変更に合わせてイベントを発火させることができました! 大変分かりやすく説明していただき、とても助かりました! ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問