npm i vuex
구조
src > store >index.js
import Vuex from "vuex";
import userStroe from "./modules/userStore"
import postStore from "./modules/postStore"
export default new Vuex.Store({
modules: {
userStore,
postStore
}
});
const userStore = {
namespaced: true,
state: {
// 상태 관리하는 곳
},
getters: {
// 컴포넌트에서 state를 사용할 수 있게 해주는 곳
},
mutations: {
// state 변경하는 곳
},
actions: {
//비동기 요청, mutations 호출
}
}
export default userStore;
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store/index.js"
createApp(App).use(store).mount('#app')
// userStore.js
const userStore = {
namespaced: true,
state: {
loginUserName : "",
},
getters: {
GE_USER_NAME : state => state.loginUserName
}
}
// MyPage.vue
<template>
<div>
{{ }}
</div>
</template>
<script>
import { mapGetters } from 'vuex';
const userStore = 'userStore';
export default {
...
data () {
return {
userName : ""
}
},
computed: {
// 1) 이름 지정해서 가져오기
...mapGetters(userStore, {
storeUserName : 'GE_USER_NAME' // 데이터 바인딩하는 것처럼 사용가능
});
// 2) getters 이름 그대로 사용해서 가져오기
...mapGetters(userStore, [
'GE_USER_NAME'
]);
},
methods : {
setUserName : function () {
// 1)
this.userName = this.storeUserName;
// 2)
this.userName = this.GE_USER_NAME;
}
}
}
</script>
// userStore.js
const userStore = {
namespaced: true,
state: {
loginUserName : "",
},
mutations: {
MU_USER_NAME : (state , payload) => {
// payload : .commit을 통해 전달받은 데이터
state.loginUserName = payload
}
}
}
// MyPage.vue
methods: {
setUserName() {
this.$store.commit('userStore/MU_USER_NAME', this.userName);
}
}
// userStore.js
const userStore = {
namespaced: true,
state: {
loginUserName : "",
followerList : []
},
mutations: {
MU_USER_FOLLOWER_LIST : (state, payload) => {
state.followerList = payload.followerList;
}
},
actions: {
AC_USER_FOLLOWER_LIST : (context) => {
axios
.get('유저 팔로우 받아오는 url')
.then(res => {
return context.commit('MU_USER_FOLLOWER_LIST',
{ followerList : res.data }
)
})
.catch(err => throw(err))
}
}
}
// MyPage.vue
import { mapActions } from 'vuex';
mounted() {
this.$store.dispatch('userStore/AC_USER_FOLLOWER_LIST')
}
...
methods: {
...mapActions('userStore', ['AC_USER_FOLLOWER_LIST'])
}
user store에서 contract store에 있는 mutations 사용
userStore에서 로그아웃 actions(다른 스토어 있는 state 값을 초기화)을 만들기
// contractStore.js
// userStore.js 에서 contractStore.js에 있는 상태를 초기화 시키기 위한 mutations 정의
const contractStore = {
namespaced: true, // 이 값을 true로 해줘야 전역에서 이 store를 contractStore라는 이름으로 사용할 수 있음
state: {
contractData: {},
},
getters: {
CONTRACT_DATA: (state) => state.contractData,
},
mutations: {
MU_RESET_STATE(state) {
state.contractData = {}; // contract store state 초기화
},
}
)
export default contractStore;
// userStore.js
//... 생략
actions: {
AC_LOGOUT({ commit }, payload) {
// 이 actions를 사용하는 곳에서 비동기(async/await)로 받고자 return 을 해줌
return axios
.post("/user/logout", { userId: payload.userId })
.then((res) => {
if (res.data === "/") {
commit("MU_RESET_STATE"); // userStore.js(local_현재 작성된 페이지 안) 에 있는 mutation
// { root: true } 를 입력해줌으로써 다른 store에 있는 mutations 메소드를 사용할 수 있음.
// 밑에 있는 3개의 mutations는 다른 store에 있는 mutatios이다.
commit("contractStore/MU_RESET_STATE", payload, { root: true });
commit("issueStore/MU_RESET_STATE", payload, { root: true });
commit("mypageStore/MU_RESET_STATE", payload, { root: true });
}
return res.data;
})
.catch((err) => alert(err));
},
}
// ... 생략
혹시 userStore.js파일에 state영역은 새로고침 시 전부 값이 사라지게 되나요?