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):
    https://github.com/vycoder/qodo



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



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


  • @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 :
    https://github.com/vycoder/qodo

    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