VUEX:NUXT JS中未知的动作类型

发布于 2025-02-12 23:28:44 字数 2455 浏览 0 评论 0原文

我使用Firebase的身份服务。当我调用Vuex的动作时,我有问题。目前,我仅尝试登录,但我采用此错误:VUEX:未知动作类型。您会在方法中看到,我尝试了(“命名空间/用户”),但不能解决它。有人可以帮我吗?请。

用户/index.js(在商店文件夹中)

import { signInWithEmailAndPassword, signOut } from "firebase/auth";
import { auth } from "@/plugins/firebase";

export const state = () => ({
  user: null
})

export const mutation = {
  SET_USER(state, user) {
    state.user = user
  },

  SIGNOUT_USER(state) {
    state.user = null
  }
}

export const action = {
  async login ({ commit }, account) {
    const {email, password} = account

    try {
      await signInWithEmailAndPassword(auth, email, password)
    } catch(error) {
      console.log(error)
    }

    commit('SET_USER', auth.currentUser)
    this.$router.push('/admin')
  },

  async logout ({commit}) {
    await signOut(auth)
    commit('SIGNOUT_USER')
    this.$router.push('/')
  }
}

登录。

<template>
  <div class="container">
    <div class="inner-container">
      <div class="login">
        <div class="login__header">
          <div class="login__header--logo">
            <img src="/Logo.svg" alt="" class="login__header--logo__image" />
          </div>
          <h2 class="login__header--title">DASHBOARD</h2>
        </div>
        <form class="login__form">
          <div class="form-group">
            <label for="" class="form-group__label">E-Mail</label>
            <input
              v-model="email"
              type="email"
              autocomplete="email"
              class="form-control"/>
          </div>
          <div class="form-group">
            <label for="" class="form-group__label">Password</label>
            <input
              v-model="password"
              type="password"
              class="form-control"/>
          </div>
          <div class="form-group">
            <button class="admin submit-btn" type="submit" @click.prevent="login()">SIGN-IN</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LoginView',
  data () {
    return {
      email: '',
      password: ''
    }
  },

  methods: {
    login () {
      this.$store.dispatch("users/login", this.email, this.password);
    }
  }
}
</script>

I using auth service of firebase. I have a problem when I calling the action from vuex. Currently I trying only login but I taking this error: Vuex: unknown action type. You will see in method, I tried ("namespace/users") but not solve it. Can someone help me? please.

users/index.js (in store folder)

import { signInWithEmailAndPassword, signOut } from "firebase/auth";
import { auth } from "@/plugins/firebase";

export const state = () => ({
  user: null
})

export const mutation = {
  SET_USER(state, user) {
    state.user = user
  },

  SIGNOUT_USER(state) {
    state.user = null
  }
}

export const action = {
  async login ({ commit }, account) {
    const {email, password} = account

    try {
      await signInWithEmailAndPassword(auth, email, password)
    } catch(error) {
      console.log(error)
    }

    commit('SET_USER', auth.currentUser)
    this.$router.push('/admin')
  },

  async logout ({commit}) {
    await signOut(auth)
    commit('SIGNOUT_USER')
    this.$router.push('/')
  }
}

login.vue

<template>
  <div class="container">
    <div class="inner-container">
      <div class="login">
        <div class="login__header">
          <div class="login__header--logo">
            <img src="/Logo.svg" alt="" class="login__header--logo__image" />
          </div>
          <h2 class="login__header--title">DASHBOARD</h2>
        </div>
        <form class="login__form">
          <div class="form-group">
            <label for="" class="form-group__label">E-Mail</label>
            <input
              v-model="email"
              type="email"
              autocomplete="email"
              class="form-control"/>
          </div>
          <div class="form-group">
            <label for="" class="form-group__label">Password</label>
            <input
              v-model="password"
              type="password"
              class="form-control"/>
          </div>
          <div class="form-group">
            <button class="admin submit-btn" type="submit" @click.prevent="login()">SIGN-IN</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LoginView',
  data () {
    return {
      email: '',
      password: ''
    }
  },

  methods: {
    login () {
      this.$store.dispatch("users/login", this.email, this.password);
    }
  }
}
</script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

枫以 2025-02-19 23:28:44

好吧,我最终找到了解决方案。我使用动作而不是动作。 “ S”

Okay I found finally solution. I used action instead of actions. "S"

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文