Vue.js 在~/plugins/axios中获取$store数据

我是VueJs新手，我正在寻找在VueJs中~/plugins/axios中获取$store数据的最佳方法，以便将其用于API。但也出现了一些错误。希望你的帮助

~/plugins/axios.js

import axios from 'axios'
import store from '~/store'

var api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/',
  headers: {'Authorization': 'JWT ' + store.state.token}
})

export default api

错误：

const AuthenticationStore = () => {
  return new Vuex.Store({
    state: {
      token: null
    },
    mutations: {
      SET_TOKEN: function (state, token) {
        state.token = token
        instance.defaults.headers = { Authorization: 'Bearer ' + token }
      }
    },
    actions: {
      ....
    }
  })
}

const createStore = () => {
  return AuthenticationStore
}
export { AuthenticationStore }

export default createStore

问题：无法将存储传输到axios.create，因此未定义存储

My~/Store.JS:

const AuthenticationStore = () => {
  return new Vuex.Store({
    state: {
      token: null
    },
    mutations: {
      SET_TOKEN: function (state, token) {
        state.token = token
        instance.defaults.headers = { Authorization: 'Bearer ' + token }
      }
    },
    actions: {
      ....
    }
  })
}

const createStore = () => {
  return AuthenticationStore
}
export { AuthenticationStore }

export default createStore

错误：

无法读取
'headers'：{'Authorization'：'JWT'+store.state.token}
中未定义的属性'token'

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

var api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/',
  headers: {'Authorization': 'JWT ' + store.state.token}
})

export default api

你需要导入你的商店

如果您使用的是
numxt.js
，默认存储将处于经典模式。它将导出创建vuex存储的函数

import Vuex from 'vuex'

import mutations from './mutations'

const createStore = () => {
  return new Vuex.Store({
    state: {
      counter: 0
    },
    mutations
  })
}

export default createStore

因此，您可以通过切换到模块模式来修复新错误

或者将
store/index.js
编辑为以下结构

import Vuex from 'vuex'

import mutations from './mutations'
cosnt store = new Vuex.Store({
    state: {
      counter: 0
    },
    mutations
  })
const createStore = () => {
  return store
}

export { store }
export default createStore

并将
~plugins/axios.js
中的import语句从“../store”

更改为

import{store}，您可以在变体中执行以下操作：

{
  SET_TOKEN: function (state, token) {
    state.token = token;        
    Vue.axios.defaults.headers.common['Authorization'] =
        (token ? ('JWT ' + token) : '');
}

每次在变体中设置令牌时，都会更新默认令牌，这样就不必在每次请求中都设置它。也可以在行动中做到这一点

假设通过
this.axios
，您的
axios可以在全球范围内使用。有一个图书馆就是为了这个。确保在条目js文件中执行此操作（
main.js
可能）：

这样，当您需要提出请求时，就不必导入您的应用商店或axios。您的典型请求如下所示：

this.axios.get('URL', {data}, {options});

请告诉我进口商店是从哪里来的？localstorage中的令牌状态，bro^^^$store是否引用vuex store？我假设你有类似的应用程序结构。然后导入此
store.js
以从中获取数据。$store指的是具有该权限的vuex store-->。我使用NuxtJSNot工作<代码>类型错误：无法读取未定义的属性“token”
我解决了您的第一个错误，即导入丢失错误。新错误是关于导入的vuex存储实例没有
状态
字段。您还可以将源代码包括在存储文件夹中。如何执行此操作？我用突变更新了我的代码！更新了答案。你可以使用我的新。它使放置令牌和调用方法变得容易。