How do I use vuex module actions of axios ?

[ytsejam]

import axios from 'axios'
axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.withCredentials = true
const axiosInstance = axios.create({
  baseURL: 'http://localhost:8000/api/'
})
export default async ({ Vue }) => {
  axiosInstance.interceptors.response.use(null, error => {
    if (error.response.data) {
      Object.keys(error.response.data).forEach(key => {
        const data = error.response.data
        if (Array.isArray(data[key])) {
          data[key] = data[key].join(' ')
        }
      })
      return Promise.reject(error)
    }
  })
  Vue.prototype.$axios = axiosInstance
}

export { axiosInstance }

this my /src/boot/axios.js file and I use it in boot in quasar.conf.js . I can see the data if I use this.$axios(‘api_address’) and console.log it. but could not reach from computed.

[dobbel]

@ytsejam

Sorry what i meant was /src/store/index.js . But please check the repo in my previous post. Working code will explain it better than I can.

[ytsejam]

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      articles,
      books,
      members,
      pages,
      status,
      user,
      videolessons
    },
    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEBUGGING,
    plugins: [createPersistedState({})]
  })

  return Store
}
``` I am trying to find an vuex dispatch in it.

[dobbel]

@ytsejam

 computed: {
    ...mapGetters('articles', ['indexArticles']),
    articles () {
      return this.$store.dispatch('articles/fetchIndexArticles')
    }

this code looks weird. You define acticles twice in this component. Once by using mapgetters and twice by mapping articles() to a store action on the next line.

[ytsejam]

I tried both ways, If anything solves, but none of them worked that is why there is two different methods.

[dobbel]

@ytsejam

Ah I see, do please take a look at :
https://github.com/vycoder/qodo

I am sure it will help a lot.

[codethirsty]

@ytsejam try not only importing …mapGetters also …mapActions. In your methods try this:

methods: {
…mapActions(‘store_name’, [‘actions’,[‘anotherAction’]])
}

use that action to fill your state with data and the getters just to obtain the value from your state

[ytsejam]

This is not in documents but when booting axios

import axios from 'axios'

export default ({ store, Vue }) => {
  Vue.prototype.$axios = axios
  store.$axios = axios
}

[Hawkeye64]

Perhaps the original issue was that his store was not namespaced, but was using it in that manner.

[Lou Rectoret]

My solutlion as late March 2021:

import Vue from 'vue'

import Axios from 'axios'

const BASE_URL = process.env.API || 'http://localhost:3000/'

const axios = Axios.create({
  baseURL: BASE_URL,
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json'
  }
})

Vue.prototype.$axios = axios

export {
  axios
}