Хранение данных в Vue.js с помощью vue-router - PullRequest
Новая
       19

Хранение данных в Vue.js с помощью vue-router

0 голосов
/ 29 августа 2018

У меня есть проект Vue.js, в котором установлен vue-router для управления «страницами» и axios для вызова API.

Вот мой маршрут 

routes: [
  {
    path: '/',
    name: 'LandingPage',
    component: LandingPage
  },
  {
    path: '/test',
    name: 'test',
    component: testing
  }
]

в testingPage, я буду вызывать API для получения данных для рендеринга страниц следующим образом. 

<template>
  <div>
    {{title}}
  </div>
</template>
<script>
 import axios from 'axios'

 export default {
   name: 'app',
   data: function () {
     return {
       result: [],
       title:""
     }
   },
   methods: {
     fetchResult: function () {
       axios.get('https://jsonplaceholder.typicode.com/todos/1').then((response) => {
         this.result = response;
         this.title = response.data.title
         console.log(response);
       }, (error) => {
         console.log(error)
       })
     }
   },
   mounted: function () {
     this.fetchResult()
   }
 }
</script>

Когда возникает проблема, при каждом использовании ссылки и перенаправления на эту «страницу» будет вызываться API. API будет обновляться только 1-2 раза в месяц.

Можно ли вызвать только один раз, затем сохранить результат и сделать так, чтобы он больше не вызывал API, пока не будет использовано обновление страницы или открытие страницы в новом браузере / вкладке?

1 Ответ

0 голосов
/ 29 августа 2018

Как насчет использования vuex? При подключении основного приложения (оно будет смонтировано только один раз) вы можете хранить данные в хранилищах vuex.

Кроме того, если вы хотите сохранить состояние в нескольких вкладках, я рекомендую вам использовать localStorage.

Проверьте это: Несколько вкладок LocalStorage для одного пользователя Вариант использования

И есть библиотека для vuex + localalstorage: https://www.npmjs.com/package/vuex-localstorage

...