No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How do I use vuex module actions of axios ?

    Help
    5
    13
    2719
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Y
      ytsejam last edited by

      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 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @ytsejam last edited by 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.

        1 Reply Last reply Reply Quote 0
        • Y
          ytsejam last edited by

          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 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @ytsejam last edited by 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.

            1 Reply Last reply Reply Quote 0
            • Y
              ytsejam last edited by

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

              dobbel 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @ytsejam last edited by

                @ytsejam

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

                I am sure it will help a lot.

                1 Reply Last reply Reply Quote 0
                • C
                  codethirsty last edited by 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

                  1 Reply Last reply Reply Quote 0
                  • Y
                    ytsejam last edited by

                    This is not in documents but when booting axios

                    import axios from 'axios'
                    
                    export default ({ store, Vue }) => {
                      Vue.prototype.$axios = axios
                      store.$axios = axios
                    }
                    
                    1 Reply Last reply Reply Quote 0
                    • Hawkeye64
                      Hawkeye64 last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • L
                        Lou Rectoret last edited by

                        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
                        }
                        
                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post