// ./store/store.js
import { createStore } from 'vuex'
import AxiosApi from '/src/store/AxiosApi'
import TokenStorage from '/src/store/TokenStorage'
const store = createStore({
modules: {
TokenStorage,
AxiosApi,
}
})
export default store
각 모듈은 state, getters, mutation, 같은 속성을 가진 객체면 된다.
### TokenStorage
TokenStorage는 백엔드에서 로그인의 응답으로 주는 토큰을 받아 저장하는 store다.
아직 persistedstate를 적용하지 않아 새로고침 시 토큰이 날아가버린다.
getters와 mutation만 작성하여 정말 저장소의 역할에 충실하다.
중요한 점은 getters에서 꼭 **state를 그대로 반환하지 않은 경우**도 있다는 것이다.
만약 이 getters가 없었다면, 매번 `this.$store.state.TokenStorage.accessTokenKey`를 받아오는 수고로움이 들었을 것.
### AxiosApi
이 모듈은 django앱에 대응되도록 나누었다.
1. ProfileApi
가입, 로그인 요청을 담당한다.
**actions에서 axios요청을 한 뒤 그 axios객체를 바로 반환하기로 했다.**
로그인에 성공하면 라우터에서 뷰를 전환해야 하는데 store내에선 하면 안되기 때문이다.
그래서 store에 적절한 작업들은 actions내에서 즉각 처리를 한 후 바로 반환하기로 했다.
**then().then()구문이 되나 싶어 직접 해보니 된다.**
2. ArticleApi
게시물 목록, 조회, 추가, 삭제를 담당한다. (수정도 곧 추가할거야)
각 파일별로 앱의 url을 갖고 있는 객체를 일일히 작성해야한다. 이 부분은 좀 미흡하다.
url이 앱마다 제각각일 경우를 고려하면 이게 맞는 것 같기도 하다.
### 그 외 중요한 것들
* getters에서 다른 getters를 호출하려면..? `(state, getters) => {}`
다른 모듈의 getters를 호출하려면 rootGetters를 이용하면 된다. `rootGetters['ModuleName/GetterName']`
* computed에서 getter를 더 깔끔히 쓰고 싶다면...?
...mapGetters({
customGetterName: 'GetterName'
})
//... 연산자는 결합된 데이터를 뽀개주는 연산자다.
이렇게 쓰면 템플릿에서 {{ customGetterName }}으로 가볍게 쓸 수 있다.
* actions 인자 뽀개기
Created vuex store. it has some modules, AxiosApi, TokenStorage. Create axiosapi vuex modules, to replace ApiRequest.js utils.
Vuex
installation
npm install vuex@next --savevue3를 위해서 다른 패키지를 설치한다.Get Started
createApp(App).use(router).use(vuexStore).mount('#app')
// ./store/store.js import { createStore } from 'vuex'
import AxiosApi from '/src/store/AxiosApi' import TokenStorage from '/src/store/TokenStorage'
const store = createStore({ modules: { TokenStorage, AxiosApi, } })
export default store
...mapGetters({ customGetterName: 'GetterName' }) //... 연산자는 결합된 데이터를 뽀개주는 연산자다.
actionName( context, otherParameter){ context.commit('') }
actionName( { commit, rootGetters, rootState }, otherParameter){}