我有一个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,直到使用刷新页面或在新的浏览器/选项卡中打开页面吗?
答案 0 :(得分:0)
如何使用vuex?在安装主应用程序(仅安装一次)上,您可以将数据存储在vuex存储中。
此外,如果要将状态保留在多个标签中,建议您使用localStorage
。
查看以下内容:Multiple Tab LocalStorage single user Use case
vuex + localstorage有库: https://www.npmjs.com/package/vuex-localstorage