[해결완료] 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'}) --> self.$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해서 사용하면 된다 ~~~