JS 파일에서 Nuxt 프로젝트의 Vuex 스토어 액세스

JS 파일에서 Nuxt 프로젝트의 Vuex 스토어 액세스

Nuxt 프로젝트에서는 루트 폴더에 "apiAccess.js"라는 이름의 파일이 있습니다.이 파일은 Ajax 호출을 하는 함수를 서버 API로 내보냅니다.이 파일은 서버 API에 액세스해야 하는 모든 페이지에서 Import됩니다.각각의 API 요청과 함께 JWT 토큰을 전송해야 하며 Vuex 스토어에 해당 토큰을 저장했습니다.

이 "apiAccess.js" 파일 내의 Vuex 스토어에서 JWT 토큰에 액세스해야 합니다.아쉽게도 이거예요.$store는 이 파일 내에서 인식되지 않습니다.이 파일 내에서 Vuex 스토어에 액세스하려면 어떻게 해야 합니까?아니면 뭔가 다른 걸 했어야 했나?

다음은 apiAccessjs 파일에서 스토어에 접속하려고 하는 일부입니다.

import axios from 'axios'
const client = axios.create({
  baseURL: 'http://localhost:3000/api',
  json: true,
  headers: { Authorization: 'Bearer' + this.$store.state.auth.token }
})

이 투고를 읽고 나서, 다음과 같은 일반적인 구조를 사용했습니다.

// generic actions file
import {
  SET_DATA_CONTEXT,
  SET_ITEM_CONTEXT
} from '@/types/mutations'

// PAGEACTIONS
export const getDataContext = api => async function ({ commit }) {
  const data = await this[api].get()
  commit(SET_DATA_CONTEXT, data)
}

export const getItemContext = api => async function ({ commit }, id) {
  const data = await this[api].getById(id)
  commit(SET_ITEM_CONTEXT, data)
}

export const createItemContext = api => async function ({}, form) {
  await this[api].create(form)
}

export const updateItemContext = api => async function ({}, form) {
  await this[api].update(form)
}

export const deleteItemContext = api => async function ({}, id) {
  await this[api].delete(id)
}

모든 스토어에 대해 범용 파일의 액션을 사용했습니다.

// any store file
import {
  getDataContext,
  getItemContext,
  createItemContext,
  updateItemContext,
  deleteItemContext,
  setDynamicModal
} from '@/use/store.actions'


const API = '$rasterLayerAPI'

export const state = () => ({
  dataContext: [],
  itemContext: {},
})

export const actions = {
  createItemContext: createItemContext(API),

  getDataContext: getDataContext(API),

  getItemContext: getItemContext(API),

  updateItemContext: updateItemContext(API),

  deleteItemContext: deleteItemContext(API),
}

왜냐하면 비슷한 기능을 가진 가게들이 많았거든요.에 대해서도mutations나는 일반적인 돌연변이 기능을 사용했다.

언급URL : https://stackoverflow.com/questions/60061796/accessing-vuex-store-in-nuxt-project-from-js-file