来自 JS 文件的 Nuxt 访问存储(在模块模式下) [英] Nuxt access store (in Module mode) from JS file

问题描述

我在 Nuxt 应用程序的命名空间存储中使用了一个 AuthService.我需要将 AuthService 中的更改提交到命名空间存储，但我不知道如何将存储导入我的 AuthService.

I have an AuthService that I use in a namespaced store in my Nuxt app. I need to commit mutations from AuthService to the namespaced store but I can't figure out how to import the store into my AuthService.

我见过将 store 导入到 JS 文件中的示例，但是 store 是在 Vue 应用程序中明确定义的.因为我将 Nuxt 与模块模式用于我的商店，所以我不确定可以将我的商店导入到 AuthService 文件的根路径.据我了解，当使用模块模式"时，Nuxt 在后台处理创建根存储和所有命名空间存储

I've seen examples where the store is imported into the JS file, but the store is explicitly defined in the Vue app. Because I'm using Nuxt with the Module mode for my store, I'm not sure of the root path where I can import my store into the AuthService file. As I understand it, Nuxt handles creating the root store and all the namespaced store behind the scenes when use "Module mode"

我的 Nuxt store 目录包括 index.js(为空)和 auth.js，其中包含我想从中调用的突变身份验证服务.

My Nuxt store directory includes index.js (which is empty) and auth.js which has the mutations I want to call from 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)
      }
    })
  }
}

推荐答案

在 store 文件夹中的 index.js 文件中，你需要像这样返回 store

In index.js file which is in store folder you need to return store like this

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

export default createStore

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

and in your authService.js file you need to import store like this

import $store from '~/store'

这样你就可以访问你的商店了

by this you will be able to access your store

$store.commit('setUser', null)

希望这对你有用

重要提示:您不需要安装 vuex，因为它已经与 nuxtjs 一起提供

Important Note: you don't need to install vuex because it is already shipped with nuxtjs

这篇关于来自 JS 文件的 Nuxt 访问存储(在模块模式下)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！