Как использовать модули vuex в vue 3

У меня есть проект 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>

person Simo D'lo Mafuxwana    schedule 14.10.2020    source источник
comment
Можете ли вы добавить пример кода того, как вы используете геттеры?   -  person RobbeVP    schedule 15.10.2020
comment
@RobbeVP Обновлено.   -  person Simo D'lo Mafuxwana    schedule 15.10.2020
comment
вы пробовали ...mapGetters(['auth/loginToken']),?   -  person Boussadjra Brahim    schedule 15.10.2020
comment
@BoussadjraBrahim, когда я использую auth/loginToken, я получаю предупреждение. Property "loginToken" was accessed during render but is not defined on instance. как использовать loginToken?   -  person Simo D'lo Mafuxwana    schedule 15.10.2020
comment
Для меня это решение не работает. stackoverflow.com/questions/66516327/   -  person kasp3rsky    schedule 09.03.2021


Ответы (1)


импорт в Vue.js 3 должен быть таким:

 import auth from "./modules/auth";

но у вас это как:

 import * as auth from "./modules/auth";
person funzeye    schedule 15.10.2020