반응형
vue 3에서 vuex 모듈을 사용하는 방법
vue 3(Javascript) 프로젝트가 있습니다.vuex 저장소를 모듈로 분할하려고 해도 오류가 계속 표시됨[vuex] unknown getter: loginToken
제가 알기론 유일하게 (주요한) 변경사항이 있습니다.vuex 4.0.0-beta
는 Import 스테이트먼트입니다.모듈을 사용하는 방법은 여전히 동일해야 합니다.
store/index.displaces
import { createStore } from 'vuex';
import * as auth from "./modules/auth";
const store = createStore({
modules: {
auth,
},
state: {
....
},
getters: {
...
},
mutations: {
...
},
actions: {
...
}
})
store/displays/auth.displays
import firebase from "./../../firebase";
const state = {
loginToken: null,
}
const getters = {
loginToken({ loginToken }) {
return loginToken;
},
}
const mutations = {
loginToken(state, token) {
if(token) {
state.loginToken = token;
} else {
state.loginToken = null;
}
}
}
const actions = {
login(context, request) {
return new Promise((resolve, reject) => {
firebase.auth().signInWithEmailAndPassword(request.email, request.password)
.then(({ user }) => {
context.dispatch("getUserProfile", user.uid).then(() => {
context.commit("loginToken", user.uid);
resolve(user.uid);
});
}).catch(function(error) {
reject(error)
});
})
}
}
export default { state, getters, mutations, actions }
Page.vue
<template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button @click="gotoProfile" v-if="loginToken">Profile</ion-button>
<ion-button @click="logout" v-if="loginToken">Logout</ion-button>
</ion-buttons>
<ion-buttons>
</ion-buttons>
<ion-title class="logo" @click="gotoHome">{{ name }} </ion-title>
</ion-toolbar>
</ion-header>
</template>
<script>
import { mapGetters } from 'vuex';
....
computed: {
...mapGetters(['loginToken']),
},
...
</script>
Vue.js 3에서의 Import는 다음과 같아야 합니다.
import auth from "./modules/auth";
다음과 같이 표시됩니다.
import * as auth from "./modules/auth";
언급URL : https://stackoverflow.com/questions/64349235/how-to-use-vuex-modules-in-vue-3
반응형
'programing' 카테고리의 다른 글
y -= m < 3은 무엇을 의미합니까? (0) | 2022.08.21 |
---|---|
VueJ - Vue가 정의되어 있지 않습니다. (0) | 2022.08.21 |
VueJ는 부모로부터 자녀 컴포넌트의 데이터에 액세스합니다. (0) | 2022.08.21 |
Vuex의 "router.currentRoute.name"이 변경되었을 때 계산된 속성 업데이트 (0) | 2022.08.21 |
C에서 단일 문자를 스캔하는 방법 (0) | 2022.08.21 |