Получить данные из одной-многих красноречивых связанных таблиц в Laravel с помощью Vue

Я предвосхищу это тем фактом, что я невероятно новичок как в Laravel, так и в Vue, так что, пожалуйста, будьте добры 🙂

Также … Я нашел это: https://github.com/cretueusebiu/laravel-vue-spa и настроил это красиво, и я строю поверх него, поэтому способ, которым я пытаюсь его построить, состоит в том, чтобы продолжать строить так, как он был создан.

Существует таблица пользователей, и я могу зарегистрировать пользователя и войти в систему как указанный пользователь. Я создал таблицу клиентов, которая принадлежит таблице пользователей (отношение один ко многим) и может успешно хранить данные в этой таблице и связывать ее с зарегистрированным пользователем … все хорошо здесь.

Теперь моя проблема заключается в получении этих сохраненных данных во второй таблице.

Я могу получить зарегистрированные данные пользователя, просто сославшись на него как {{user}}, а затем, если я хочу быть более конкретным, просто сказать что-то вроде {{user.id}} в разделе шаблона. файла Vue.

В разделе сценария файла Vue соответствующие биты (я думаю), которые устанавливают эту переменную:

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');

}
}
}

Функция addClient работает и сохраняет клиента в нужной таблице, используя php artisan tinker (и mysql workbench). Я определил, что отношение один ко многим работает правильно и данные сохраняются правильно.

В качестве примечания я удалил часть данных скрипта, так как не думаю, что она имеет отношение к вопросу, и эта часть работает нормально.

Я пришел к выводу, что mapGetters — это то, что устанавливает переменную {{user}}, поэтому теперь мне нужно знать, как сделать то же самое для чтения из моей таблицы клиентов.

Я понятия не имею, для чего предназначен бит «auth / user» внутри вычисляемой функции mapgetters.

После того, как я покопался в файлах и немного почитал на mapgetters, я нашел файл, содержащий следующее (и добавил немного для клиентов, но я не совсем уверен, что он делает)

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
}
}

Файл типов устанавливает константы со строками с тем же именем, что и имя константы.

Я настроил маршруты для извлечения данных и получения их таким образом, но без особой удачи … в api.php:

Route::group(['middleware' => 'auth:api'], function () {

Route::get('/clients', 'ClientsController@show');

});

и в этой функции я просто возвращаю строку, чтобы посмотреть, смогу ли я заставить ее работать, но я даже не захожу так далеко … Каждый раз, когда я пытаюсь воспроизвести информацию о пользователе, я получаю ошибку vuex.

На самом деле я не могу найти в Интернете никакой информации о том, как получить информацию таким образом из таблицы красноречивых отношений с помощью vue таким образом, поэтому я обратился к этому вопросу.

Я пытался дать как можно больше информации, но, возможно, что-то забыл, так как этот вопрос немного затянулся … Я предполагаю, что моя проблема связана с vuex, так как это ошибка, при которой консоль регистрируется нормально , Пожалуйста, не стесняйтесь задавать больше вопросов, если вы чувствуете, что мне не хватает какой-либо информации.

Итак, мой вопрос … как мне получить данные из таблицы отношений один ко многим для этого конкретного пользователя таким же образом, как извлекается информация о пользователе? Это вообще возможно? Они сказали, что Vue так хорошо идет рука об руку с Laravel, но я просто не могу разобраться с этим.