Question 27: Consider the following HTML, which includes Vue 2 and Vu…

1<div id="app">
2        <p v-if="userData">User: {{ userData.name }}</p>
3        <p v-else>No user data available</p>
4    </div>
5
6    <script>
7        const store = new Vuex.Store({
8            state: {
9                userData: null
10            },
11            mutations: {
12                setUserData(state, data) {
13                    state.userData = data;
14                }
15            },
16            actions: {
17                fetchUserData({ commit }) {
18                    return fetch('https://httpstat.us/500')
19                        .then(response => {
20                            if (!response.ok) throw new Error('Network error');
21                            return response.json();
22                        })
23                        .then(data => {
24                            commit('setUserData', data);
25                        },
26                            error => {
27                                commit('setUserData', { name: 'Luke' })
28                            })
29                        .catch(() => {
30                            commit('setUserData', null);
31                        });
32                }
33            }
34        });
35
36
37        new Vue({
38            el: '#app',
39            store,
40            created() {
41                this.$store.dispatch('fetchUserData');
42            },
43
44            computed: {
45                userData() {
46                    return this.$store.state.userData;
47                }
48            }
49        });
50
51    </script>