Question

嘿，对vuejs来说是新手，并且正在使用Firebase进行身份验证。这是我在单独的js文件中的firebase代码。我在这个js文件中包含了所有的变异，状态，操作和获取方法，然后将其调用到不同的组件中

import firebase from "firebase/app";
import "firebase/auth";

export default {
state: {
  loggedInUser:
  localStorage.getItem("userInfo") != null
    ? JSON.parse(localStorage.getItem("userInfo"))
    : null,
  loading: false,
  error: null
},
getters: {
  loggedInUser: state => state.loggedInUser,
  loading: state => state.loading,
  error: state => state.error
},
mutations: {
  setUser(state, data) {
  state.loggedInUser = data;
  state.loading = false;
  state.error = null;
},
setLogout(state) {
  state.loggedInUser = null;
  state.loading = false;
  state.error = null;
},
setLoading(state, data) {
  state.loading = data;
  state.error = null;
},
setError(state, data) {
  state.error = data;
  state.loggedInUser = null;
  state.loading = false;
},
clearError(state) {
  state.error = null;
 }
},
actions: {
  login({ commit }, data) {
    commit("clearError");
    commit("setLoading", true);
    firebase
      .auth()
      .signInWithEmailAndPassword(data.email, data.password)
      .then(user => {
        const newUser = { uid: user.user.uid };
        localStorage.setItem("userInfo", JSON.stringify(newUser));
        commit("setUser", { uid: user.user.uid });
        console.log("userInfo");
      })
      .catch(function (error) {
      localStorage.removeItem("userInfo");
      commit("setError", error);
    });

  firebase.auth().onAuthStateChanged(function (user) {

    if (user) {
      // User is signed in.
      let email = user.email;
    } else {
      // User is signed out.
    }
   });
},
signUserUp({ commit }, data) {
  commit("setLoading", true);
  commit("clearError");
  firebase
    .auth()
    .createUserWithEmailAndPassword(data.email, data.password)
    .then(user => {
      commit("setLoading", false);

      const newUser = {
        uid: user.user.uid
      };
      console.log(newUser);
      localStorage.setItem("userInfo", JSON.stringify(newUser));
      commit("setUser", newUser);

    })
    .catch(error => {
      commit("setLoading", false);
      commit("setError", error);
      localStorage.removeItem("userInfo");
      console.log(error);
    });
},
 signOut({ commit }) {
     firebase
    .auth()
    .signOut()
    .then(
      () => {
        localStorage.removeItem("userInfo");
        commit("setLogout");
      },
      _error => { }
    );
  }
 }
};

我在这样的组件中调用它

import { mapGetters, mapActions, mapState } from "vuex";
export default {
  components: {
  },

  data()  {
    return {,
      email: "",
    };
   },

 computed: {
    ...mapGetters(["getSideBarToggleProperties"]),
    ...mapState(['loggedInUser']) 
  },

  methods: {
    ...mapActions([
    "signOut",
    "login"
    ]),

   getLogin () {
      this.login({ email: this.email });   
   },

然后我使用@click调用方法'getLogin'来显示

<a class="dropdown-item" id="testing">{{loggedInUser}}</a>

Answer 1

从js文件中导出电子邮件，然后从脚本标签内的vue组件中导入电子邮件，然后就可以使用。

Answer 2

这是一种方法：

// messages.js file
const variableToUseInVue = "hello from a js file"
export default { variableToUseInVue }

现在在您的组件中：

// Hello.vue component
<template>
  <div>
    <p>Message: {{ messages.variableToUseInVue }}</p>
    <!-- Message: hello from a js file -->
  </div>
</template>
<script>
  import messages from './messages' // Import from the js location
  export default {
    data: () => ({ messages: messages })
  }
</script>

第二种方法是导出每个变量并使用对象分解：

// messages.js file
export const variableToUseInVue = "hello from a js file"

现在在您的组件中：

// Hello.vue component
<template>
  <div>
    <p>Message: {{ variableToUseInVue }}</p>
    <!-- Message: hello from a js file -->
  </div>
</template>
<script>
  import { variableToUseInVue } from './messages' // Import from the js location
  export default {
    data: () => ({ messages: variableToUseInVue })
  }
</script>

考虑到您的需求，更好的方法是在Vuex中具有登录功能并在其中具有用户信息，这样您就可以在任何地方访问信息。

此外，您可以具有一个登录组件，该组件公开电子邮件变量并运行登录功能，该电子邮件变量将是反应性的，并会在更改时进行更新。

如何将变量从js文件传递到.vue文件

2 个答案: