Есть простейший компонент в Nuxt.js, который выводит данные JSON полученные по API. Компонент работает как нужно. Но есть понимание, что каждый раз нет необходимости запрашивать JSON файл с сервера. Хочется сохранять данные большого списка в Store Vuex и после запрашивать уже оттуда, без дополнительной нагрузки на БД.
Подскажите, как я могу засунуть этот код с правилами асинхронности Vuex в стор и выводить данные в v-for компонента?
<template>
<div style="margin-top: 100px;">
<div class="tabl" v-for="item in ranges" :key="item.id">
<p>{{item.name}}</p>
<p>{{item.address.zipcode}}</p>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
ranges : []
};
},
methods: {},
mounted() {
this.$axios.get('https://jsonplaceholder.typicode.com/users')
.then((r) => {
this.ranges = r.data
});
}
}
</script>