JS 파일의 Nuxt 액세스 저장소(모듈 모드)

JS 파일의 Nuxt 액세스 저장소(모듈 모드)

나는 내 Nuxt 앱에서 이름보다 앞선 상점에서 사용하는 AuthService를 가지고 있다.AuthService에서 names-traed store로 변경 사항을 적용해야 하는데 어떻게 스토어를 AuthService로 가져올지 모르겠어.

저장소를 JS 파일로 가져오는 예제를 보았지만, 저장소는 Vue 앱에 명시적으로 정의되어 있다.내 스토어에 모듈 모드인 Nuxt를 사용하고 있기 때문에 AuthService 파일로 스토어를 가져올 수 있는 루트 경로를 잘 모르겠다.내가 알기로는 Nuxt는 "Module mode"를 사용할 때 루트 저장소 생성과 모든 이름 앞지르기 저장소를 뒤에서 처리한다.

마이 넥스트store디렉토리 포함index.js(비어 있음) 및auth.jsAuthService에서 전화하고 싶은 돌연변이가 있어

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)
      }
    })
  }
}

플러그인을 이용한 솔루션을 제안하고 싶다.

외부 모듈에서 (externalModule.js) 정의한다.store변수 및 내보내기init받는 기능Nuxt context논거로서함수가 할당함수store로부터context모듈에서 현재 사용할 수 있는 변수:

let store;
export function init (context) {
    store = context.store;
};
(...further business logic using store)

그런 다음 플러그인 폴더에서 플러그인 파일을 생성(호출하자)storeInit.js. 파일을 가져오면init외부 모듈에서 기능을 수행하고 Nuxt에서 요구하는 기본 플러그인 기능을 내보낸다.함수가 수신함contextNuxt에서 온 사람들은init을 통과하는 기능.context추가:

import { init } from '[pathTo]/externalModule.js';
export default (context, inject) => {
    init(context);
};

그런 다음 플러그 인을 에 등록한다.nuxt.config.js파일:

module.exports = {
    ...
    plugins: [
        { src: '~/plugins/storeInit' }
    ],
    ...
}

Nuxt에 의해 앱이 빌드되고 플러그인이 등록될 때 이렇게 하면context물체는 외부 모듈로 전달되고 우리는 그것으로부터 어떤 것이든 사용할 수 있다, 다른 것들 중에서.store.

에서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와 함께 제공되므로 설치할 필요가 없음

언급URL: https://stackoverflow.com/questions/60218967/nuxt-access-store-in-module-mode-from-js-file