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

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

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

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

Nuxt.js

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

Q&A

0回答

250閲覧

【Nuxt.js】mapGettersで取得した値が更新されない

FumiakiNakao

総合スコア180

Vue.js

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

Nuxt.js

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

0グッド

0クリップ

投稿2020/09/23 02:11

Nuxt.jsを用いたアプリ作成中に、上記疑問にあたったので質問させてください

やりたいこと(概要)

ボタンをクリックした際に、APIと通信してデータを取得 => 取得した値を元に子のコンポーネントのviewを更新したい

やりたいこと(コード)

親のコンポーネント

js

1<template> 2 <div> 3 <button @click="update">更新</button> 4  <Child /> 5 </div> 6</template> 7 8<script> 9import Child from '~/components/Child' 10export default { 11 components: { 12 Child 13 }, 14 methods: { 15 async update(){ 16 this.$store.dispatch('store/update') 17 } 18 } 19} 20</script>

子のコンポーネント

js

1<template> 2 <div> 3 {{data}} <!--この値が更新されて欲しい--> 4 </div> 5</template> 6 7<script> 8import {mapGetters} from 'vuex' 9export default { 10 computed: { 11 ...mapGetters('store', ['data']) 12 } 13} 14</script>

store

js

1export const state = () => { 2 data: [] 3} 4 5export const getters = { 6 data: (state) => state.data, 7} 8 9export const mutations = { 10 setData(state, payload) { 11 state.data = payload 12 }, 13} 14 15export const actions = { 16 async update({ commit }) { 17 //APIとの通信部(http pluginに関するコードは割愛) 18 const { data, error } = await this.$http().get( 19 url //urlが入る 20 ) 21 if (error) { 22 throw new Error('失敗') 23 } 24 commit('setData', data) 25 }, 26} 27

起きている問題

子のコンポーネント内のdataが更新されない

状況確認(調べたこと)

  • APIからのレスポンスは正常に返ってきており、かつ毎回変わっている(console.logで確認)
  • mutationは正常に呼び出されており、payloadも正しく渡されている(console.logで確認)
  • mapGettersをmapStateに変えて試してみたが、結果は変わらなかった(ボタン押下後も値は更新されなかった)

以上、素人質問で恐縮ですが、ご教示お願いいたします
また、上記コードは実際のコードを簡略化して書いたものですので、抜け漏れなどありましたらご容赦ください

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問