无法使用 Vuex 和 axios 获取数据

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 获取数据

Cannot fetch data with Vuex and axios

laravel

vue.js

axios

vuex