Vue.js 将axios实例与vuex一起使用

我正在使用Rails后端构建Vue前端

在前端，我使用的是Axios，我已经设置了这些用于身份验证的拦截器：

import axios from 'axios'

const API_URL = 'http://localhost:3000'

const securedAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

const plainAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

securedAxiosInstance.interceptors.request.use(config => {
  const method = config.method.toUpperCase()
  if (method !== 'OPTIONS' && method !== 'GET') {
    config.headers = {
      ...config.headers,
      'X-CSRF-TOKEN': localStorage.csrf
    }
  }
  return config
})

securedAxiosInstance.interceptors.response.use(null, error => {
  if (error.response && error.response.config && error.response.status === 401) {
    // If 401 by expired access cookie, we do a refresh request
    return plainAxiosInstance.post('/refresh', {}, { headers: { 'X-CSRF-TOKEN': localStorage.csrf } })
      .then(response => {
        localStorage.csrf = response.data.csrf
        localStorage.signedIn = true
        // After another successfull refresh - repeat original request
        let retryConfig = error.response.config
        retryConfig.headers['X-CSRF-TOKEN'] = localStorage.csrf
        return plainAxiosInstance.request(retryConfig)
      }).catch(error => {
        delete localStorage.csrf
        delete localStorage.signedIn
        // redirect to signin if refresh fails
        location.replace('/')
        return Promise.reject(error)
      })
  } else {
    return Promise.reject(error)
  }
})

export { securedAxiosInstance, plainAxiosInstance }

在main.js上，我通过以下方式提供它们：

import VueAxios from 'vue-axios'
import { securedAxiosInstance, plainAxiosInstance } from './axios'
Vue.use(VueAxios, {
  secured: securedAxiosInstance,
  plain: plainAxiosInstance
})
new Vue({
  el: '#app',
  router,
  store,
  securedAxiosInstance,
  plainAxiosInstance,
  render: h => h(App)
})

在组件中，我可以成功地使用它们，如：

这是.http.secured.get（“/items”）

问题是，我无法在商店中使用它们，因为我得到： 无法读取未定义“”的属性“secured”

我在商店里试过：

import { securedAxiosInstance, plainAxiosInstance } from '../axios'

    const store = new Vuex.Store({
        secured: securedAxiosInstance,
        plain: plainAxiosInstance,
    .....

---

正确的方法是什么？

您可以在引用当前应用程序的Vue实例的存储中使用此

因此，在你的情况下：

this.\u vm.$http.secured.get（'/items'）

作为替代方案，您可以将Vue实例作为有效负载传递给您的操作，如：

---

this.$store.commit（'myMutation'，this）

您可以在引用当前应用程序的Vue实例的存储中使用

this.\u vm

因此，在你的情况下：

this.\u vm.$http.secured.get（'/items'）

作为替代方案，您可以将Vue实例作为有效负载传递给您的操作，如：

---

this.$store.commit（'myMutation'，this）

您如何尝试在store中使用它们？我在store和模块中尝试了很多组合，包括在main.js中进行的相同导入。但它们都不起作用。您可以尝试

this.\u vm.$http.secured.get（'/items'））

或将vue实例作为有效负载传递给您的变体/action是的，修复了它。如果您将其放在回答中，我将接受它。您也可以解释一下吗？谢谢！您打算如何在存储中使用它们？我在存储和模块中尝试了很多组合，包括在main.js中进行的相同导入。但没有一个有效。您可以尝试

this.\u vm.$http.secured.get（“/items”）

或将vue实例作为有效负载传递给您的变体/actionYes，修复了它。如果您将其放入答案中，我将接受它。您也可以解释一下吗？谢谢！我有同样的问题，但使用它会给我一个typeError“无法读取未定义的属性”。我有同样的问题，但使用它会给我一个typeError”无法读取pro然后是未定义的perty。