Question

在我的Nuxt项目中，我的根文件夹中有一个名为“ apiAccess.js”的文件。该文件仅导出一堆函数，这些函数对服务器API进行Ajax调用。该文件将导入需要访问服务器API的任何页面中。我需要通过每个api请求发送一个JWT令牌，并将该令牌存储在Vuex存储中。

我需要从此“ apiAccess.js”文件中的Vuex存储访问JWT令牌。不幸的是，在此文件中无法识别this。$ 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 }
})

Answer 1

在阅读了post之后，我使用了以下通用结构：

// 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相同，我使用了通用突变函数。

从JS文件访问Nuxt项目中的Vuex存储

1 个答案: