I'm gonna preface this with the fact that I am incredibly new to both Laravel and Vue so please be nice :)
Also...I found this: https://github.com/cretueusebiu/laravel-vue-spa and set it up nicely and am building on top of it so the way that I am trying to build it is to continue to build in the way that it was set up.
There is a user table and I can register a user and login as said user. I have created a clients table which belongs to the users table (one to many relationship) and can succesfully store data to this table and associate it with the logged in user...all good here.
My issue is now retrieving that stored data in the second table.
The way that I would retrieve the logged in user data is just by referring to it as {{ user }} and then if I wanted to be more specific just saying something along the lines of {{ user.id }} in the template section of the Vue file.
In the script section of the Vue file the relevant bits (I think) that set up this variable are:
import { mapGetters } from 'vuex';
export default {
middleware: 'auth',
computed: mapGetters({
user: 'auth/user'
}),
methods:{
async addClient(){
// Add the client.
const { data } = await this.clientForm.post('/api/addclient');
}
}
}
The addClient function works and stores the client into the correct table and using php artisan tinker (and mysql workbench) I have determined that the one to many relationship is working correctly and the data is being stored correctly.
As a side note I have removed the data part of the script as I dont think its relevant to the question and that part is all working fine.
I have come to the conclusion that the mapGetters is what is setting the {{ user }} variable so now I need to know how to do the same for reading from my clients table.
I have no idea what the 'auth/user' bit is for inside the computed mapgetters function is.
After digging through the files and reading up a bit on mapgetters I have found a file containing the following (and added a bit for clients to it but im not really sure what it does)
import axios from 'axios'
import Cookies from 'js-cookie'
import * as types from '../mutation-types'
// state
export const state = {
user: null,
clients: null,
token: Cookies.get('token')
}
// getters
export const getters = {
user: state => state.user,
clients: state => state.clients,
token: state => state.token,
check: state => state.user !== null
}
// mutations
export const mutations = {
[types.SAVE_TOKEN] (state, { token, remember }) {
state.token = token
Cookies.set('token', token, { expires: remember ? 365 : null })
},
[types.FETCH_USER_SUCCESS] (state, { user }) {
state.user = user
},
[types.FETCH_USER_FAILURE] (state) {
state.token = null
Cookies.remove('token')
},
[types.LOGOUT] (state) {
state.user = null
state.token = null
Cookies.remove('token')
},
[types.UPDATE_USER] (state, { user }) {
state.user = user
}
}
// actions
export const actions = {
saveToken ({ commit, dispatch }, payload) {
commit(types.SAVE_TOKEN, payload)
},
async fetchUser ({ commit }) {
try {
const { data } = await axios.get('/api/user')
commit(types.FETCH_USER_SUCCESS, { user: data })
} catch (e) {
commit(types.FETCH_USER_FAILURE)
}
},
updateUser ({ commit }, payload) {
commit(types.UPDATE_USER, payload)
},
async logout ({ commit }) {
try {
await axios.post('/api/logout')
} catch (e) { }
commit(types.LOGOUT)
},
async fetchOauthUrl (ctx, { provider }) {
const { data } = await axios.post(`/api/oauth/${provider}`)
return data.url
}
}
The types file sets constants with strings of the same name as the constant name.
I have set up routes to retrieve the data and get it that way but with not much luck...in api.php:
Route::group(['middleware' => 'auth:api'], function () {
Route::get('/clients', 'ClientsController@show');
});
and in that function I am just returning a string to see if I can get it to work but I am not even getting that far....Any time I try and replicate how the user information is being retrieved I get a vuex error.
There isnt really any information I can find online to do with how to retrieve information this way from a eloquent relationship table with vue in this way so I have resorted to asking here.
I have tried to give as much information as possible but may have forgotten something as this question has become a bit long winded....I assume that my problem is something to do with vuex as that is the error that the console is logging normally. Please feel free to ask more questions if you feel I am missing any information.
So my question is...how do I retrieve the data from a one to many relationship table for that specific user in the same way that the user information is being retrieved? Is this even possible? They said that Vue goes hand in hand with Laravel so well but I just cant seem to get my head around this one.