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

Question

在我的 Nuxt 项目中，我在根文件夹中有一个名为“apiAccess.js”的文件。这个文件只是导出了一堆对服务器 API 进行 Ajax 调用的函数。该文件被导入到需要访问服务器 API 的任何页面中。我需要为每个 api 请求发送一个 JWT token ，并且我已将该 token 存储在 Vuex 商店中。

我需要从这个“apiAccess.js”文件中的 Vuex 商店访问 JWT token 。不幸的是，此文件中无法识别 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 相同我使用了通用的突变函数。