Question

我使用 Laravel 和 VueJS 创建了 2 个项目 - 1 个用于后端，1 个用于前端。从 Laravel 我为所有用户创建 API 端点：

Laravel routes/api.php

Route::prefix('users')->group(function(){
    Route::get('all', [UsersController::class, 'index']);
});

这是UsersController

public function index(){
        $user = User::select('id','name', 'email')->get();

        return response()->json($user);
    }

这是我从 api 与 Postman 收到的：

[
    {
        "id": 1,
        "name": "Toni Stoyanov",
        "email": "toni.nikolaev.23@gmail.com"
    },
    {
        "id": 2,
        "name": "Thomas Shelby",
        "email": "st3851ba@gmail.com"
    }
]

这是我的 VueJS 文件：

axios.defaults.baseURL = 'http://backend.test/api/'

在我的 Vuex 中，我创建了文件夹 users/index.js

import axios from 'axios'

export default {
    state(){
        return{
            users: {

            }
        }
    },
    getters:{
        getUsers(state){
            return state.users
        }
    },
    mutations:{
        SET_USER(state, data){
            state.users = data
        }
    },
    actions:{
        async setUsers(context){
            let response = await axios.get('users/all')
            console.log(response)
    
            context.commit('SET_USER',response.data)
        }
    }
}

并在我的具有计算属性的组件中：

getUsers(){
            return this.$store.getters.getUsers
        }

我的应用程序没有任何内容......当我用一些虚拟数据 getter 填充用户时，但操作和突变不起作用。

Answer 1

你必须在创建的钩子中分派动作：

computed:{
getUsers(){
            return this.$store.getters.getUsers
        }
},
created(){
   this.$store.dispatch('setUsers')
}

无法使用 Vuex 和 axios 获取数据

1 个答案: