Javascript 如何使用axios api服务和vuex解决Vue依赖循环

要将令牌添加到axios请求中，我想访问保存在我的Api基本服务中Vuex状态下的令牌：

Api.js

import axios from 'axios'
import store from '../store'

export default () => axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    Authorization: `Bearer ${store.state.token}`,
    'Content-Type': 'application/json'
  }
})

import Api from '@/services/Api'

export default {
  fetchFoo() {
    return Api().get('foo')
  }
}

import FooService from '@/services/FooService'

export default {
  async fetchFoo({ commit }, queryParams) {
    const response = await FooService.fetchFoo(queryParams)
    commit('setFoo', response.data)
  }
}

import { createStore } from 'vuex'
import actions from '@/store/actions'
import createPersistedState from 'vuex-persistedstate'
import mutations from '@/store/mutations'

export default createStore({
  actions,
  mutations,
  plugins: [
    createPersistedState()
  ],
  state: {
    foo: [],
    token: null,
    user: null,
    userIsLoggedIn: false
  },
  strict: process.env.NODE_ENV !== 'production'
})

另一个服务（FooService）使用此Api基础服务向后端发送特定请求：

FooService.js

import axios from 'axios'
import store from '../store'

export default () => axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    Authorization: `Bearer ${store.state.token}`,
    'Content-Type': 'application/json'
  }
})

import Api from '@/services/Api'

export default {
  fetchFoo() {
    return Api().get('foo')
  }
}

import FooService from '@/services/FooService'

export default {
  async fetchFoo({ commit }, queryParams) {
    const response = await FooService.fetchFoo(queryParams)
    commit('setFoo', response.data)
  }
}

import { createStore } from 'vuex'
import actions from '@/store/actions'
import createPersistedState from 'vuex-persistedstate'
import mutations from '@/store/mutations'

export default createStore({
  actions,
  mutations,
  plugins: [
    createPersistedState()
  ],
  state: {
    foo: [],
    token: null,
    user: null,
    userIsLoggedIn: false
  },
  strict: process.env.NODE_ENV !== 'production'
})

在Vuex的操作中，调用FooService获取数据并将其保存到存储中

store/actions.js

import axios from 'axios'
import store from '../store'

export default () => axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    Authorization: `Bearer ${store.state.token}`,
    'Content-Type': 'application/json'
  }
})

import Api from '@/services/Api'

export default {
  fetchFoo() {
    return Api().get('foo')
  }
}

import FooService from '@/services/FooService'

export default {
  async fetchFoo({ commit }, queryParams) {
    const response = await FooService.fetchFoo(queryParams)
    commit('setFoo', response.data)
  }
}

import { createStore } from 'vuex'
import actions from '@/store/actions'
import createPersistedState from 'vuex-persistedstate'
import mutations from '@/store/mutations'

export default createStore({
  actions,
  mutations,
  plugins: [
    createPersistedState()
  ],
  state: {
    foo: [],
    token: null,
    user: null,
    userIsLoggedIn: false
  },
  strict: process.env.NODE_ENV !== 'production'
})

store/index.js

import axios from 'axios'
import store from '../store'

export default () => axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    Authorization: `Bearer ${store.state.token}`,
    'Content-Type': 'application/json'
  }
})

import Api from '@/services/Api'

export default {
  fetchFoo() {
    return Api().get('foo')
  }
}

import FooService from '@/services/FooService'

export default {
  async fetchFoo({ commit }, queryParams) {
    const response = await FooService.fetchFoo(queryParams)
    commit('setFoo', response.data)
  }
}

import { createStore } from 'vuex'
import actions from '@/store/actions'
import createPersistedState from 'vuex-persistedstate'
import mutations from '@/store/mutations'

export default createStore({
  actions,
  mutations,
  plugins: [
    createPersistedState()
  ],
  state: {
    foo: [],
    token: null,
    user: null,
    userIsLoggedIn: false
  },
  strict: process.env.NODE_ENV !== 'production'
})

由于将令牌添加到axios头中，我得到了一个依赖循环错误

2:1  error  Dependency cycle via @/store/actions:2=>@/services/FooService:1  import/no-cycle

---

我不知道如何解决这个问题。是否有更好的方法在基本服务中获取令牌？

尝试添加如下令牌：

“授权”：“承载者”+此.$store.state.token'

。您可能还需要在

'Accept'

周围添加单引号。谢谢，但是通过

此访问存储。$store

返回错误

这是未定义的
。您的存储/index.js看起来如何？我刚刚添加了存储/index.js。您可以将main.js中的存储包含到Vue实例中。这样，它就可以在组件和混合中进行全局访问。然后您可以将Api.js和FooService.js更改为mixin，并将它们包含到actions.js中。正如我提到的，在mixin中，您可以通过这个$store访问存储，而不需要包含它，这会导致依赖循环错误。