Laravel + VueJS: Handling Exception In Vuex

Example 1

a) Controller 

When using get() method, you can provide constraint that will return collection in array. 

If no object. This will return empty array []

public function search($search)
    {
        
        $group = Group::query($search)
        ->where('name', '=', $search) 
        ->get();

        return response()->json($group, 200);
}

b) Thus, in Store.js (Vuex). We can do like this.

actions : {
        
        checkGroupName : async (context, name) => {

                let { data } = await Axios.get('http://localhost:8888/test/public/api/groups/search/'+name);

                if(data.length === 0){
                
                    context.commit('setGroup',{id:0,name:""}); //set to data to null
                    context.commit('setGroupAvailable',false); //set group availability to false

                }else{

                    context.commit('setGroup',data[0]);
                    context.commit('setGroupAvailable',true);

                }
}
}

Example 2

a) Controller

If you are using first() or firstOfFail() it will retrieve the first results of the query. If not, it will throw an exception (Illuminate\Database\Eloquent\ModelNotFoundException)

public function search($search)
    {
        
        $group = Group::query($search)
        ->where('name', '=', $search) 
        ->first();

        return $group;

    }

b) Store.js

By using try .. catch you can captured any exception occurs during API request.

actions : {
        
        checkGroupName : async (context, name) => {
                
                try{
                
                let { data } = await Axios.get('http://localhost:8888/test/public/api/groups/search/'+name);

                console.log(data)
                
                context.commit('setGroup',data);
                context.commit('setGroupAvailable',true);

            } catch (err){
                
                context.commit('setGroup',{id:0,name:""}); //set to data to null
                context.commit('setGroupAvailable',false); //set group availability to false

            }
}
}