実現したいこと
Vuexのauth変数がtrueになることを監視して、
特定のメソッドを呼び出したいのですが、
watchが反応してくれません。
何が間違っているのでしょうか?よろしくお願いいたします。
概要
Loginコンポーネントでログインを実施し、
auth変数がfalseからtrueになります。
画面表示の{{auth}}
でtrueに切り替わっているので、
auth変数が切り替わっているのは、確認が取れております。
ただ切り替わっても、watach:
で待ち受けている、auth(val,old)
メソッドが呼び出されません。
login.vue
1<template> 2 <section class="container"> 3 <login/> 4 <div> 5 {{auth}} 6 </div> 7 </section> 8</template> 9 10<script> 11import Login from '~/components/Login.vue' 12 13export default { 14 computed: { 15 auth() {return this.$store.state.users.auth} 16 }, 17 watach: { 18 auth(val,old) { 19 console.log('auth:' + val) 20 if (val) { 21 this.$router.push("/") 22 } 23 24 }, 25 }, 26 components: { 27 Login 28 }, 29 data() { 30 return { 31 } 32 }, 33} 34</script> 35 36
users.js
1 2import axios from "axios"; 3 4export const state = () => ({ 5 token: "", 6 auth: false, 7}) 8 9export const mutations = { 10 setAuth(state, auth) { 11 state.auth = auth 12 }, 13} 14 15export const actions = { 16 async login({ commit }, userData) { 17 var response = await axios.post('http://localhost:8080/users/login', userData) 18 19 commit('setToken', response.data.token) 20 commit('setAuth', true) 21 }, 22}
回答1件
あなたの回答
tips
プレビュー