Доступ к состоянию vuex в отдельном файле js шаблона axios - PullRequest
Новая
       16

Доступ к состоянию vuex в отдельном файле js шаблона axios

0 голосов
/ 03 сентября 2018

У меня проблема. У меня есть состояние Vuex. Также я делаю запрос axios. Я создал отдельный файл для запроса шаблона axios с предопределенным заголовком. Это выглядит так: 

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

export default axios.create({
  baseURL: 'https://k-3soft.com/',
  timeout: 1000,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${store.getters.getToken}`
  }
})

Проблема в том, что в этом случае магазин в неопределенном. Так как же мне импортировать в этот файл /src/axios/request.js мой магазин vuex? Также я попробовал import { store } from '../store/index'. Мой магазин выглядит так: 

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  modules: {
    user
  },
  state: {
    url: 'https://icfprod.k-3soft.com/',
    token: '',
  },
  getters: {
    getToken: state => state.token
  },
})

Также каждый может поделиться с любым хранилищем, где есть Vuex с модулями, axios с файлом с отдельным предопределенным шаблоном. Просто хочу посмотреть, как организовать структуру моего проекта. Спасибо всем за помощь.

1 Ответ

0 голосов
/ 04 сентября 2018

Используйте фабричную функцию для создания экземпляра axios. 

// request.js
import axios from 'axios'

const createAxiosInstance = (token) => {
  return axios.create({
    baseURL: 'https://k-3soft.com/',
    timeout: 1000,
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    }
  }
})

export default createAxiosInstance

Затем используйте его в модуле, например: 

// user.js
import createAxiosInstance from '../request.js'


const userModule = {
  // ...
  actions: {
    async doSomeAction ({ state, commit, rootState }) {
      const axios = createAxiosInstance(rootState.token)

      const response = await axios.post('/some/api/endpoint')
        .then(response => response)
        .catch(error => {
           // handle error
        })

      commit('SOME_MUTATION', response.data)
    }
  }
}
...