I am currently sending an API request to retrieve an array of objects that has the following structure:
returnedItems [
{
name: 'Adam',
age: '30',
interest: 'Sports'
},
{
name: 'Emily',
age: '22',
interest: 'Reading'
}]
My goal is to store this data in Vuex and utilize getters and setters to showcase the information in a Data-Table component, but I am unsure about the process.
Here is a snippet of my Data-Table component:
<template>
<v-data-table :headers="columns" :items="tableData">
<template v-slot:items="props">
<td>{{props.tableData.name}} </td>
<td>{{props.tableData.age}} </td>
</template>
</v-data-table>
</template>
<script>
import { mapGetters } from 'vuex'
export default{
data() {
return {
columns: [
{ text: 'Name', sortable: false },
{ text: 'Age', sortable: false },
{ text: 'Interest', sortable: false },
]
}
}
},
computed: {
...mapGetters({
tableData: 'tableData'
})
}
</script>
Furthermore, here is how my store is structured:
state: {
items: []
},
getters: {
tableData: state => state.items
}
If my approach is incorrect or if I need to implement mutations, any guidance would be highly appreciated. Thank you for your support.