nuxt存储模块模式下的firebase auth

时间:2020-03-22 08:09:45

标签: firebase vue.js firebase-authentication vuex nuxt.js

由于从Vuex classic转换为模块模式,我的登录功能已损坏

index.vue登录界面

login() {
  if (this.$refs.loginForm.validate()) {
    const email = this.loginData.email
    const password = this.loginData.password
    this.$notifier.showMessage({ text: 'Logging in', color: 'primary' })
    this.$store.dispatch('user/userLogin', { email, password }).then(
      (result) => {
        //
      },
      (error) => {
        this.$notifier.showMessage({ text: error, color: 'error' })
      }
    )
  }

store / user.js突变

const state = () => ({
  user: null,
  isAuthenticated: false
})

const mutations = {
  setUser(state, payload) {
    state.user = payload
  },
  setIsAuthenticated(state, payload) {
    state.isAuthenticated = payload
  }
}

store / user.js登录操作

  userLogin({ commit }, { email, password }) {
    return new Promise((resolve, reject) => {
      auth
        .signInWithEmailAndPassword(email, password)
        .then((user) => {
          console.log('logged in')
          commit('setUser', user)
          commit('setIsAuthenticated', true)
          this.$router.push({
            name: 'home'
          })
          resolve(true)
        })
        .catch((error) => {
          commit('setUser', null)
          commit('setIsAuthenticated', false)
          this.$router.push({
            path: '/'
          })
          reject(error)
        })
    })
  },

单击登录名后,控制台将充满

之类的错误
client.js?06a0:77 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:90)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:789)
    at Watcher.run (vue.runtime.esm.js?2b0e:4568)
    at Watcher.update (vue.runtime.esm.js?2b0e:4542)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at B.reactiveSetter [as a] (vue.runtime.esm.js?2b0e:1055)
    at Tb (auth.esm.js?b7aa:27)
    at B.k.Oc (auth.esm.js?b7aa:26)
    at lc (auth.esm.js?b7aa:29)
    at hc (auth.esm.js?b7aa:29)

这似乎与commit('setUser', user)有关。当我使用v-model作为输入(电子邮件,密码)时,我尝试了slice()/复制了输入值,但没有任何效果。我在这里想念什么?

编辑:添加了模板

<template>
  ...
            <v-card-text>
              <v-form
                ref="loginForm"
                v-model="valid"
                lazy-validation
                @submit.prevent="login()"
              >
                <v-text-field
                  v-model="loginData.email"
                  label="Email"
                  autofocus
                  clearable
                  :rules="[rules.required, rules.length]"
                  prepend-icon="mdi-account-circle"
                  @blur="resetValidation()"
                />
                <v-text-field
                  v-model="loginData.password"
                  :type="showPassword ? 'text' : 'password'"
                  label="Password"
                  :rules="[rules.required]"
                  prepend-icon="mdi-lock"
                  :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                  @click:append="showPassword = !showPassword"
                  @blur="resetValidation()"
                />
...

0 个答案:

没有答案