How do I use vuex module actions of axios ?
-
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.
-
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.
-
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 mappingarticles()
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.
-
Ah I see, do please take a look at :
https://github.com/vycoder/qodoI 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.
-
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 }