我有一个vue 3 (Javascript)项目。试图将我的vuex存储拆分为模块,但我一直得到错误的[vuex] unknown getter: loginToken
。据我所知,vuex 4.0.0-beta
的唯一主要变化是导入语句。如何使用模块应该仍然是一样的?
store/index.js
import { createStore } from 'vuex';
import * as auth from "./modules/auth";
const store = createStore({
modules: {
auth,
},
state: {
....
},
getters: {
...
},
mutations: {
...
},
actions: {
...
}
})
store/modules/auth.js
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>
发布于 2020-10-15 05:22:32
Vue.js 3中的导入需要如下所示:
import auth from "./modules/auth";
但你把它当作:
import * as auth from "./modules/auth";
https://stackoverflow.com/questions/64349235
复制相似问题