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

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

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

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

Q&A

0回答

652閲覧

ログインユーザーが持っているTODOデータを即座に画面に反映されるようにしたい

daifuku0515

総合スコア3

Vue.js

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

0グッド

0クリップ

投稿2021/09/08 11:16

いつもお世話になっております。一つ質問させてください。

前提・実現したいこと

ログインユーザーが持っているTODOデータを即座に画面に反映されるようにしたい

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

ユーザーAとBがいると仮定します。
ユーザーAでログインするとユーザーAで登録したタスクが表示されます。これは想定通りです。

ユーザーAでログイン

ここでログアウトをして、ユーザーBにログインします。するとなぜかユーザーAのタスクが表示されてしまいます。
ユーザーBでログインした直後の画面

ブラウザを更新するとユーザーBで作成したタスクが表示されます。
ブラウザ更新直後のユーザーBの画面

これをブラウザの更新をせず、ユーザーBがログインと同時にユーザーBのタスクが表示されるようにしたいです。

該当のソースコード

関係ありそうなコードをアップ致します。他に必要な情報があればご指摘お願いします。
タスク表示をするコンポーネントファイル

vue

1<template> 2 <div> 3 <h3>管理画面</h3> 4 <label for="taskName">タスク名</label> 5 <br> 6 <input id="taskName" type="text" v-model="taskName"> 7 <br> 8 <label for="description">詳細</label> 9 <br> 10 <input id="description" type="textarea" v-model="description"> 11 <br> 12 <br> 13 <button @click="createTask">タスク作成</button> 14 <br> 15 <span class="header-item" @click="logout">ログアウト</span> 16 <div class="registered-tasks"> 17 <h4>登録されているタスク</h4> 18 <ul> 19 <li v-for="data in taskLists" :key="data.id"> 20 名前: {{data.name}} 詳細: {{data.description}} 21 </li> 22 </ul> 23 </div> 24 </div> 25</template> 26 27<script> 28import axios from 'axios'; 29 30export default { 31 data() { 32 return { 33 taskName: "", 34 description: "", 35 taskLists: [], 36 }; 37 }, 38 created() { 39 axios.get('http://localhost:3000/v1/auth/tasks') 40 .then(response => { 41 this.taskLists = response.data 42 console.log(response); 43 }) 44 }, 45 methods: { 46 logout() { 47 this.$store.dispatch('logout'); 48 }, 49 createTask() { 50 axios.post('http://localhost:3000/v1/auth/tasks',{ 51 task_params: 52 { 53 name: this.taskName, 54 description: this.description 55 } 56 }).then((response) => { 57 this.$router.go({path: this.$router.currentRoute.path, force: true}) 58 }) 59 this.taskName = "" 60 this.description = "" 61 } 62 } 63}; 64</script> 65 66<style scoped> 67.header-item { 68 cursor: pointer; 69} 70 71.registered-tasks { 72 position: relative; 73 bottom: 200px; 74 left: 300px; 75} 76</style> 77

index.js(VueXファイル)

js

1import Vue from 'vue'; 2import Vuex from 'vuex'; 3import axios from "axios"; 4import router from '../router'; 5 6Vue.use(Vuex); 7 8export default new Vuex.Store({ 9 state: { 10 idToken: null 11 }, 12 getters: { 13 idToken: state => state.idToken 14 }, 15 mutations: { 16 updateIdToken(state,idToken) { 17 state.idToken = idToken; 18 } 19 }, 20 actions: { 21 async autoLogin({ commit, dispatch }) { 22 const idToken = localStorage.getItem('idToken'); 23 if (!idToken) return; 24 const now = new Date(); 25 const expiryTimeMs = localStorage.getItem('expiryTimeMs'); 26 const isExpired = now.getTime() >= expiryTimeMs; 27 const refreshToken = localStorage.getItem('refreshToken'); 28 if (isExpired) { 29 await dispatch('refreshIdToken',refreshToken); 30 } else { 31 const expiresInMs = expiryTimeMs - now.getTime(); 32 setTimeout(() => { 33 dispatch('refreshIdToken', refreshToken); 34 }, expiresInMs); 35 commit('updateIdToken', idToken); 36 } 37 commit('updateIdToken',idToken); 38 }, 39 login({ dispatch },authData) { 40 axios.post('https://firebaseURL', 41 { 42 email:authData.email, 43 password:authData.password, 44 returnSecureToken: true 45 }).then(response => { 46 dispatch('setAuthData',{ 47 idToken: response.data.idToken, 48 expiresIn: response.data.expiresIn, 49 refreshToken: response.data.refreshToken 50 }); 51 router.push('/'); 52 }); 53 }, 54 logout({ commit }) { 55 commit ('updateIdToken', null); 56 localStorage.removeItem('idToken'); 57 localStorage.removeItem('expiryTimeMs'); 58 localStorage.removeItem('refreshToken'); 59 router.replace('/login'); 60 },

試したこと

ログアウト時にコンポーネントのデータ?をクリアにできると良さそうな気はしているんですが、それをどう実現すれば良いのかがわからない状況です・・・。他にもっと良い方法や参考になるドキュメントなどあれば教えていただきたく。

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

Vue2.6.12
Rails 6.0.3.6
Ruby 2.7.0

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

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

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

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

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

FKM

2021/09/09 00:16

現状だと、タスクを表示するtaskListsがcreatedフックでしか対応してないです。だとすると、ロード直後、DOM生成前でしかそれを認識することができません。
daifuku0515

2021/09/11 03:39

FKM様 ご回答ありがとうございます。それはライフサイクルフックに関するお話という認識で良いでしょうか? このあたりは自分も理解できておらずの状態なのでもう一度学習し直したいと思っております。
FKM

2021/09/12 00:09

ライフサイクルフックをわかりやすい言葉で言い換えるとJavaScriptのonLoadと同じようなものです。要はそこでしか制御できてないので、イベントに全く絡んでいないということです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問