使用vue-router在Vue.js中存储数据

时间:2018-08-29 04:56:58

标签: javascript vue.js axios vue-router

我有一个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 :(得分:0)

如何使用vuex?在安装主应用程序(仅安装一次)上,您可以将数据存储在vuex存储中。

此外,如果要将状态保留在多个标签中,建议您使用localStorage

查看以下内容:Multiple Tab LocalStorage single user Use case

vuex + localstorage有库: https://www.npmjs.com/package/vuex-localstorage