Question

我在Nuxt应用程序的命名空间存储中使用了AuthService。我需要将AuthService的变异提交到命名空间的存储中，但是我不知道如何将存储导入到我的AuthService中。

我看过一些示例，其中将商店导入到JS文件中，但是在Vue应用程序中明确定义了商店。因为我在商店的模块模式下使用Nuxt，所以我不确定可以将商店导入AuthService文件的根路径。据我了解，使用“模块模式”时，Nuxt会在后台创建根存储和所有命名空间存储

我的Nuxt store目录包括index.js（为空）和auth.js，其中包含我要从AuthService调用的突变。

auth.js

import AuthService from '../firebase/authService'

const authService = new AuthService()

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

export const mutations = {
  setUser (state, user) {
    state.user = user
  }
}

export const actions = {
  async signUp ({ commit }, payload) {
    try {
      await authServices.createUser(payload)
      return Promise.resolve()
    } catch (err) {
      const notification = {
        duration: 5000,
        message: err.message,
        type: 'error'
      }
      commit('ui/activateNotification', notification, { root: true })
      return Promise.reject()
    }
  }
}

authService.js

import { fAuth, fDb } from './config'

// I think I need to import auth store here but I'm not sure how

export default class AuthClient {
  async createUser (payload) {
    try {
      const res = await fAuth.createUserWithEmailAndPassword(payload.email, payload.password)
      const { uid } = res.user
      const user = {
        ...payload,
        uid
      }
      await this._createUserDoc(user)
      this._initAuthListener()
      return Promise.resolve()
    } catch (err) {
      return Promise.reject(err)
    }
  }

  async _createUserDoc (user) {
    await fDb.collection('users').doc(user.uid).set(user)
  }

  _initAuthListener () {
    fAuth.onAuthStateChanged(async (user) => {
      try {
        if (user) {
          const userProfileRef = fDb.collection('users').doc(user.uid)
          const userProfileDoc = await userProfileRef.get()
          const { uid, userName } = userProfileDoc.data()

          // Here is where I want to call a mutation from the auth store

          this.store.commit('setUser', {
            uid,
            userName
          })
        } else {
          this.store.commit('setUser', null)
        }
      } catch (err) {
        console.log(err)
      }
    })
  }
}

Answer 1

在商店文件夹中的index.js文件中，您需要像这样返回商店

import Vuex from 'vuex'
const createStore = () => {
  return new Vuex.Store({
    state: {
      counter: 0
    },
    mutations: {
      increment (state) {
        state.counter++
      }
    }
  })
}

export default createStore

并且在您的authService.js文件中，您需要像这样导入商店

import $store from '~/store'

通过此操作，您将可以访问您的商店

$store.commit('setUser', null)

我希望这对您有用

重要说明：您不需要安装vuex，因为它已经随nuxtjs一起提供了

JS文件中的Nuxt访问存储（在模块模式下）

1 个答案: