How do I use vuex module actions of axios ?

  • @ytsejam

    Here’s a repo of a Quasar project with vuex modules( and a lot of other advanced features):

  • 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 ( {
          Object.keys( => {
            const 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.

  • @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.

  • export default function (/* { ssrContext } */) {
      const Store = new Vuex.Store({
        modules: {
        // 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.

  • @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.

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

  • @ytsejam

    Ah I see, do please take a look at :

    I am sure it will help a lot.

  • @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

  • This is not in documents but when booting axios

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

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

Log in to reply