Level 25
the culprit might be the forgotten. '/' 👇
let response = await this.$axios.$get('/categories')
Nov 28, 2020
7
Level 2
Nuxt.js axios call -> Laravel api
Hi, could anyone help me? I can't connect to the backend of the application. I'm not getting any bugs just the store won't fill it with data. I checked the API via postman and there it's all ok the data is coming back with the app. I use Nuxt.js and the code I have the following ...
store
index.js
export const state = () => ({
categories: []
})
export const getters = {
categories(state) {
return state.categories
}
}
export const mutations = {
SET_CATEGORIES(state, categories) {
state.categories = categories
}
}
export const actions = {
async nuxtServerInit({ commit }) {
let response = await this.$axios.$get('categories')
commit('SET_CATEGORIES', response.data)
}
}
nuxt.config.js
export default {
// Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
ssr: false,
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'shopclient',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
'@nuxtjs/axios'
],
axios: {
baseURL: 'http://127.0.0.1:8000/api',
},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
}
}
Level 2
Thank you, but it didn't help
Level 25
create the following method and check your devtools to see if your setup is correct or something else is going on with your stores or anything else
methods:{
fetchSomeCategories(){
this.$axios.$get('/').then(response => {
console.log(response.data)
}).catch(err => {
console.error(err.response.data)
})
}
},
mounted() {
this.fetchSomeCategories()
}
Level 2
Well, when I call it like this outside of vuex, it's a pride response like I expect ... But why doesn't it work via vuex ???
methods:{
fetchSomeCategories(){
this.$axios.$get('categories').then(response => {
console.log(response.data)
}).catch(err => {
console.error(err.response.data)
})
}
},
mounted() {
this.fetchSomeCategories()
}
response...ok
[{…}]
0:
children: Array(1)
0: {name: "Two", slug: "two"}
length: 1
__proto__: Array(0)
name: "One"
slug: "one"
__proto__: Object
length: 1
__proto__: Array(0)
Level 2
use
export const actions = {
async nuxtServerInit ({ commit }, { $axios }) {
const {data} = await $axios.$get('/categories')
commit('SET_CATEGORIES', data)
}
}
Level 2
Thanks for the reply but even that didn't help me. The state is still empty ...
Level 1
@anon160124 because the nuxtServerInit Nuxt will call it with the context (only from the server-side), and we can not access to the word "this." in server-side .
Please or to participate in this conversation.