使用Vuex，Firebase显示当前用户名

问题描述

我最近创建了当前的用户操作，在Vuex中进行了更改，在View中使用Firebase身份验证来获取用户信息，但是，当尝试从Firebase导入数据库时​​，这使我出错。

我的视图：

<template>
  <div>
    <div class="banner">
      <img src="@/assets/lg.png" alt="" />
    </div>

    <header>
      <div class="menu">
        <nav>
          <router-link to="/">home</router-link>
          <router-link to="/shop">shop</router-link>
          <router-link to="/contact">contact</router-link>
          <router-link to="/account">my account</router-link>
          <router-link to="/cart"><i class="fas fa-shopping-cart"></i><span> {{countOfCartProducts}}</span></router-link>        
        </nav>
      </div>
      <h4>{{currentUser}}</h4>
    </header>
  </div>
</template>

<script>
import {dbMenuAdd} from '../../firebase'

import {mapGetters} from 'vuex'

import 'firebase/firestore'
import firebase from 'firebase'
import store from '../store/index.js'

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    store.dispatch('setUser',user)
  } else {
    store.dispatch('setUser',null)
  }
});

export default {
  name: "Navigation",computed: {
    ...mapGetters([
      'countOfCartProducts',]),currentUser() {
      return this.$store.getters.currentUser
    }
  }
};
</script>

<style scoped lang="scss">

</style>

我的VueX：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: [],currentUser: null
  },getters: {
    countOfCartProducts: state => {
      return state.cart.length
    },myCart: state => {
      return state.cart
    },getTotal: state => {
      return state.cart.reduce((total,lineItem) => Number(total) + Number(lineItem.price),0);
    },currentUser: state => {
      return state.currentUser
    }
  },mutations: {
    ADD_TO_CART: (state,product) => {
      if (state.cart.findIndex(item => item.id === product.id) !== -1) {
        return
      }
      else {
        state.cart.push(product)
      }
    },REMOVE_FROM_CART: (state,product) => {
      state.cart.splice(product,1)
    },userStatus (state,user) {
      if (user) {
        state.currentUser = user
      } else {
        state.currentUser = null
      }
    }
  },actions: {
    setUser(context,user) {
      context.commit('userStatus',user)
    }
  },modules: {
  }
});

还有我的Firebase：

import firebase from 'firebase/app'
import 'firebase/firestore'

var firebaseConfig = {
    apiKey: "",authDomain: "",databaseURL: "",projectId: "",storageBucket: "",messagingSenderId: "",appId: ""
  };
  
  firebase.initializeApp(firebaseConfig);

  export const db = firebase.firestore();
  export const dbMenuAdd = db.collection('avaibleProducts');

如果用户登录后有更好的方式显示用户名，请告诉我或帮助我解决此问题。谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）