📂 router
export function requireAuth() {
return (to, from, next) => {
next();
}
}
computed: {
// appStore/accessToken
...mapGetters({
accessToken: "appStore/accessToken",
refreshToken: "appStore/refreshToken",
}),
},
watch: {
accessToken: function (val) {
console.log("accessToken changed..", val);
this.api.setAccessToken(val);
},
refreshToken: function (val) {
console.log("refreshToken changed..", val);
this.api.setRefreshToken(val);
}
},
두가지 모두 특정 data의 변화를 감지하여 자동으로 바꿔주는 속성이다.
그렇다면 두가지의 차이점은?
computed
단순한 값의 대한 계산 / 단순한 텍스트의 입력을 받아서 계산하는 것
watch
매번 실행되는 게 부담스러운 것들을 처리 / 데이터 요청
따라서 저 로직은 매번 실행되어야하는 accessToken, refreshToken를 header에 저장하는 api 호출을 watch로 처리함
상태 관리 도구 / 여러 컴포넌트가 공유되는 데이터 속성
state : 컴포넌트 간에 공유할 data
view : 데이터가 표현될 template
actions : 사용자의 입력에 따라 반응할 method
api를 vuex에서 호출해야한다고 하면 actions를 사용해야한다.
vue components에서 Dispatch라는 api를 이용해서 actions를 호출할 수 있음.
그러면 actions가 backend API를 가져와 mutations에 넘겨줌.
비동기호출은 actions에서 담당
하지만 여기서는 api를 호출하지 않아서 아무것도 담기지 않음
Mutations 이란 Vuex 의 데이터,
즉 state 값을 변경하는 로직들을 의미한다.
Getters 와 차이점은
1. 인자를 받아 Vuex 에 넘겨줄 수 있고
2. computed 가 아닌 methods 에 등록
또한, 다음 챕터에 나올 Actions 와의 차이점이다.
- Mutations 는 동기적 로직을 정의
- Actions 는 비동기적 로직을 정의
Mutations 의 성격상 안에 정의한 로직들이 순차적으로 일어나야
각 컴포넌트의 반영 여부를 제대로 추적할 수가 있기 때문이다.
mutations 와 getters
Vuex 의 데이터 (state) 변경을 각 컴포넌트에서 수행하는 게 아니라, Vuex 에서 수행하도록 하고 각 컴포넌트에서 수행 로직을 호출하면, 코드 가독성도 올라가고 성능에서도 이점이 생긴다.
📂store
import { appStoreActions } from "./appStoreActions";
export const appStore = {
namespaced: true,
state: {
accessToken: "", // null
refreshToken: "",
userInfo: {
birth: '',
email: '',
gender: '',
name: '',
phone: '',
userType: 0,
},
},
getters: {
accessToken: (state) => {
if (state.accessToken === undefined || state.accessToken === null || state.accessToken === "") {
const jsonStr = localStorage.getItem("accessToken");
if (jsonStr === undefined || jsonStr === null) {
state.accessToken = null;
return state.accessToken;
} else {
state.accessToken = JSON.parse(jsonStr);
}
}
return state.accessToken;
},
userInfo: state => {
return state.userInfo;
},
refreshToken: (state) => {
if(state.refreshToken === undefined || state.refreshToken === null || state.refreshToken === "") {
const jsonStr = localStorage.getItem("refreshToken");
if (jsonStr === undefined || jsonStr === null) {
state.refreshToken = null;
return state.refreshToken;
} else {
state.refreshToken = JSON.parse(jsonStr);
}
}
return state.refreshToken;
},
},
mutations: {
accessToken: (state, accessToken) => {
if (accessToken === undefined || accessToken === null) {
localStorage.removeItem("accessToken");
} else {
localStorage.setItem("accessToken", JSON.stringify(accessToken));
}
state.accessToken = accessToken;
},
userInfo: (state, userInfo) => {
state.userInfo = userInfo;
},
refreshToken: (state, refreshToken) => {
if(refreshToken === undefined || refreshToken === null) {
localStorage.removeItem("refreshToken");
} else {
localStorage.setItem("refreshToken", JSON.stringify(refreshToken));
}
state.refreshToken = refreshToken;
},
},
actions: appStoreActions,
};
mutations와 getters를 view에서 사용할 때
Vuex 에 내장된 mapMutations, mapGetters 를 이용하여
코드 가독성을 높일 수 있다.
computed에서 그냥 사용할 수 없어 ES6 의 문법 ... 을 사용하면 된다.
그래서 mutations은 인자를 vuex에 넘겨서 accessToken, refreshToken이 없으면 로컬 스토리지에서 삭제하고 있으면 로컬 스토리지에 저장
getters은 인자를 넘길 수 없고 각 컴포넌트에서 수행해야하지만 중복으로 코드를 쓰지 않게 하기 위해 컴포넌트 간에 공유할 data인 state의 변경