vuex - 如何在 vue 3 中使用 vuex 模块
问题描述
我有一个 vue 3 (Javascript) 项目。试图将我的 vuex 存储拆分为模块,但我不断收到错误消息[vuex] unknown getter: loginToken
。据我了解,唯一的[主要]变化vuex 4.0.0-beta
是导入语句。如何使用模块应该仍然相同?
存储/index.js
import { createStore } from 'vuex';
import * as auth from "./modules/auth";
const store = createStore({
modules: {
auth,
},
state: {
....
},
getters: {
...
},
mutations: {
...
},
actions: {
...
}
})
存储/模块/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 }
页面.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 auth from "./modules/auth";
但你有它:
import * as auth from "./modules/auth";
推荐阅读
- python - 我想在我拥有的数据框中取除一列之外的所有列的平均值
- windows-runtime - 相互依赖的 Windows 运行时依赖项属性
- asp.net-core - 如何从 ML.NET 中的 ML 模型的 ITransformer 获取训练 PipleLine
- visual-studio - 在 Qt 5.14.2 中配置 MSVC 2019
- wordpress - 如何使用 Wordpress 创建母版页
- swift - 使用淡入淡出动画刷新 UIButton 文本
- python-3.x - 在 docker-compose 中使用 selenium/standalone-chrome 与 Python 的 selenium 连接
- python-3.x - 文件更新/更改 Tkinter 时图像未显示
- angular - 选项选择时的角度显示div,隐藏其他
- c++ - Windows 可以在静态库 C++ 中调用 WinMain 函数吗