无法使用 Vuex 和 axios 获取数据答案

【问题标题】：Cannot fetch data with Vuex and axios无法使用 Vuex 和 axios 获取数据
【发布时间】：2021-05-03 07:19:30
【问题描述】：

我使用 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);
    }

这是我使用 Postman 从 api 收到的：

[
    {
        "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
        }

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

【问题讨论】：

标签： laravel vue.js axios vuex

【解决方案1】：

您必须在创建的钩子中调度操作：

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

【讨论】：