[해결완료] 5. vue store에서 this.$router 사용하기
목적
store에 logout을 함수를 담아줬다.
logout이 성공하면 login 페이지로 push되어야 한다.
따라서 store의 LOGOUT mutations에서 login 페이지로 푸쉬 해야함!
시도1.
요렇게 store파일에서 this.$router를 사용하면
[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading '$router')"
요러한 에러를 볼 수 있다.
시도2.
열심히 구글링을 하다가
this.router.push({name:'Login'})
this 대신 self를 넣어 보았다.
그러자 'push'에 typeError가 떴다.
시도3.
아하 새로운 함수를 만들면 되겠군! 이라기에 배보다 배꼽이 더 크다
🥗 성공 🥗
import router from "@/router/index.js" ********************************************************
const accounts = {
namespaced: true,
state: {
user: null,
isLogin: false
},
mutations: {
USER_UPDATE: (state, userInfo) => {
state.user = userInfo
state.isLogin = true
console.log('로그인 성공')
},
LOGOUT: (state) => {
state.isLogin = false
state.user = null
*****router.push({name:'Login'}) ************** 정답 ************************
localStorage.removeItem('jwt')
console.log('로그아웃 성공')
}
},
actions: {
userUpdate: ({ commit }, userInfo) => {
commit('USER_UPDATE', userInfo)
},
logout: ({commit}) => {
commit('LOGOUT')
}
}
}
export default accounts
바로 router 페이지를 import해서 사용하면 된다 ~~~
Author And Source
이 문제에 관하여([해결완료] 5. vue store에서 this.$router 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sin5015243/문제-5.-vue-store에서-this.router-사용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)