Question

我将以我对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工作台）确定了一对多关系正确运行并且数据已正确存储。

作为旁注，我删除了脚本的数据部分，因为我认为它与问题无关，并且该部分都工作正常。

我得出的结论是mapGetters是设置{{user}}变量的原因，所以现在我需要知道如何从客户表中读取内容。

我不知道在计算的mapgetters函数中'auth / user'位是什么。

仔细阅读文件并在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
  }
}

types文件使用与常量名称同名的字符串设置常量。

在api.php中，我已经设置了路由来检索数据并以这种方式获取它，但是运气不佳...

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

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

});

，在该函数中，我只是返回一个字符串以查看是否可以使它正常工作，但是我什至没有走那么远……。每次我尝试复制如何检索用户信息时，我都会得到一个vuex错误。

我真的没有网上可以找到的任何信息与如何以这种方式从具有vue的雄辩的关系表中检索信息有关，所以我不得不在这里询问。

我试图提供尽可能多的信息，但可能已经忘记了一些东西，因为这个问题已经困扰了我很久……。我认为我的问题与vuex有关，因为这是控制台的错误正在正常记录。如果您觉得我缺少任何信息，请随时提出更多问题。

所以我的问题是...如何以与检索用户信息相同的方式从该特定用户的一对多关系表中检索数据？这有可能吗？他们说Vue与Laravel并驾齐驱，但我似乎无法理解这一点。

使用Vue从Laravel中的一个到许多雄辩的相关表中检索数据

0 个答案: