Получение данные из API через Store VUEX в Nuxt,js

Question

Есть простейший компонент в 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>

Answer 1

Если вопрос в том, что вы хотите захардкодить этот JSON, то вы можете сразу хранить его в state модуля и получать обращаясь прямо к этому свойству, но лучше было бы сконфигурировать HTTP с помощью If-Modified-Since и свойствами кэширования и тогда будет возвращать 200, если данные были изменены и 304, если не были изменены.

Менее приоритетный способ: Также можно получать с бэка в токене информацию о том какие массивы данных были изменены и запрашивать новые, если были (ибо бэк знает кто запрашивает данные и может знать что и когда было запрошено ранее и изменились ли эти данные).

P.S. - Стоит учитывать, что Vuex существует только когда проект собран и запущен и сохранять данные между сессиями в нем не получится и можно посмотреть в сторону LocalStorage и SessionStorage.

БЛОГ НА HUSL

Получение данные из API через Store VUEX в Nuxt,js

Ответы (1 шт):