Retrieve vuex state in a distinct axios template js file

Question

Retrieve vuex state in a distinct axios template js file

I have encountered an issue with my Vue project. I am using Vuex to manage the state and making axios requests. To handle the axios requests, I created a separate file with a predefined header setup like this:

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

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

The problem I am facing is that the store is undefined in this case. I have tried importing the store into the /src/axios/request.js file using

import { store } from '../store/index'

. My Vuex store setup looks like this:

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://example.com/',
    token: '',
  },
  getters: {
    getToken: state => state.token
  },
})

If anyone has a repository showcasing a project structure with Vuex modules and axios requests set up in a separate file with a predefined template, I would appreciate it if you could share it. I'm looking for guidance on how to better organize my project. Thank you for any assistance provided.

javascript vue.js axios vuex vuex-modules

Answer 1

Answer №1

Implement a factory function for generating the axios instance.

// 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

Utilize the created axios instance in a module:

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


const userModule = {
  // ...
  actions: {
    async performSomeAction ({ 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)
    }
  }
}

Answer 2

Implement a factory function for generating the axios instance.

// 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

Utilize the created axios instance in a module:

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


const userModule = {
  // ...
  actions: {
    async performSomeAction ({ 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)
    }
  }
}

Retrieve vuex state in a distinct axios template js file

Answer №1

Similar questions

What is the best way to update the text on buttons once they've been clicked for a variety of buttons

The loading animation does not appear in the NextJS 14 - loading.tsx component while a GET request is being processed

Issues with method invocation in jQuery's .ajax requestI am having

Steps to retrieve the latest value of a specific cell within the Material UI Data Grid

Disable reloading when submitting and reset input fields after submission

Tips for fixing an error encountered when running a react native project for the first time

When using `element.addEventListener`, event.target will be the target

Is there a way to implement absolute imports in both Storybook and Next.js?

"Using Node.js Express 4.4 to efficiently upload files and store them in a dynamically

divide an array into two separate arrays depending on whether the index position is odd or even

The Foolish Mistake: Undetermined Dollar Sign

How to retrieve the value instead of the key/ID in a Laravel controller?

ERROR_UNSUPPORTED_ESM_URL_SCHEME - issue with next-sitemap plugin

The Vue background container fails to display the image

Unable to capture screenshot of hovered element using Cypress

Error in VueJS: Computed property not updating as expected due to lacking a setter function (which is

Tips for avoiding the push method from replacing my items within an array?

Having difficulty adding multiple items to the state array

Is there a way for me to determine if a domain has been registered by the client?

Reply after performing several asynchronous queries using mongoose and express