I am currently working on a project to familiarize myself with Vuex. As part of this project, I am setting up an array of objects in my store as shown below:
Vuex Store:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
users: [
{ id: 1, name: 'John Doe', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff959097919b909abf98929e96">' },
{ id: 2, name: 'Jane Doe', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="771d16191213181237101a161e1b59">' },
{ id: 3, name: 'Mark Greywood', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91fcf0e3faf6e3f4e8e6fefef5d1">' },
]
},
mutations: {},
actions: {},
modules: {}
});
Next, I am trying to access the state in the component using a computed property like this:
Component:
<template>
<div class="home">
<h1>Greetings from the Home component</h1>
<!-- When I attempt to loop through the users, nothing is displayed -->
<div v-for="user in users" :key="user.id">{{ user.name }} </div>
<!-- However, I can see the users object in the DOM -->
<div>{{ getUsers }}</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "Index",
computed: mapState({
getUsers: state => state.users
})
};
</script>
<style scoped lang="less'gt;
</style>
I am currently facing some challenges in understanding where I might be going wrong with this implementation.