有没有办法只获取一次json文件，并像全局变量一样在vue3中的任何地方使用它？
有没有办法只获取一次json文件，并像全局变量一样在vue3中的任何地方使用它？
提问于 2022-01-10 17:59:11
我一直在寻找一种方法来获得一个json文件，在一个组件中一次，然后在相同的组件和其他组件上使用它，比如如何处理全局变量。
我看过这 (它将在模板中使用它之后设置变量，因此它将在控制台中显示一个未分配的变量错误)，但是它不起作用，我还查看了vue3文档，但是没有找到任何工作的东西。
所以我没有找到，而是在每个组件中发送一个请求。
showHome.vue：
<script>
import axios from 'axios';
export default {
created(){
axios.get("http://api.mjbn.ir/post")
.then((response) => {
this.getposts = response.data;
});
},
data: function () {
return {
postsearch: "",
post: true,
product: true,
getposts: this.getposts,
};
},
methods: {
showReq(input0, input1) {
this.post = input0;
this.product = input1;
},
btnActive(input0) {
if ((input0 == "post") & (this.post == true) & (this.product == false)) {
return true;
} else if ((input0 == "product") & (this.product == true) & (this.post == false)) {
return true;
} else if ((input0 == "all") & (this.post == true) & (this.product == true)){
return true;
} else {
return false;
}
},
showRes(input0) {
if ((input0 == "post") & (this.post == true)) {
return true;
} else if ((input0 == "product") & (this.product == true)) {
return true;
} else if ((input0 == "all") & (this.post == true) & (this.product == true)){
return true;
} else {
return false;
}
},
postCount(){
const posts = this.getposts
let count = 0;
if (this.post == true & this.product == true){
return this.getposts.length;
} else if (this.post == true & this.product == false){
for (let index = 0; index < posts.length; index++) {
const element = posts[index];
if (element.type == 'post') {
count++;
}
}
return count;
} else if (this.post == false & this.product == true){
for (let index = 0; index < posts.length; index++) {
const element = posts[index];
if (element.type == 'product') {
count++;
}
}
return count;
}
return "...";
},
},
};
</script>
<template>
<div class="col-12 mt-5">
<div class="row">
<div v-for="getpost in getposts" v-show="showRes(getpost.type)" :key="getpost.id" class="col-4">
<router-link :to="{ name: 'post', params: { id: getpost.id } }">
<div class="col-6 mx-auto align-self-center">
<img
:src="getpost.img"
:alt="getpost.title"
class="img-fluid img-thumbnail"
/>
<h5 class="text-center my-3">{{ getpost.title }}</h5>
</div>
</router-link>
</div>
</div>
</div>
</template>showPosts.vue：
<template>
<!-- Post -->
<div v-for="getpost in getposts" v-show="getpost.type == link" :key="getpost.id" class="col-8 my-3 mx-auto blog-post">
<router-link
:to="{ name: link, params: { id: getpost.id } }"
style="color: #f8f8f2"
>
<div class="col-2 float-start">
<img
:src="getpost.img"
:alt="getpost.title"
class="img-fluid img-thumbnail"
/>
</div>
<div class="col-10 float-end">
<div class="col-10 ms-4 me-4">
<h2>{{ getpost.title }}</h2>
<figure class="figure figure-caption">{{ getpost.date }}</figure>
</div>
<div class="col-10 ms-4 me-4">
<p>{{ getpost.summerry }}</p>
</div>
</div>
</router-link>
</div>
</template>
<script>
import axios from 'axios';
export default {
created() {
axios.get('http://api.mjbn.ir/post')
.then(response => { this.getposts = response.data})
},
data: function () {
return {
getposts: this.getposts,
link: "post",
};
},
};
</script>main.js：
import "./assets/css/bootstrap.rtl.min.css";
import "./assets/css/main.css";
import { createApp } from "vue";
import { createWebHashHistory, createRouter } from "vue-router";
import showAbout from "./components/showAbout.vue";
import showBlog from "./components/showBlog.vue";
import showHome from "./components/showHome.vue";
import showLoading from "./components/showLoading.vue";
import showPage from "./components/showPage.vue";
import showHeader from "./components/showHeader.vue";
import showPost from "./components/showPost.vue";
import showPosts from "./components/showPosts.vue";
import showContact from "./components/showContact.vue";
// Routes
const routes = [
{
path: "/",
component: showHeader,
children: [
{ path: "", component: showHome,},
{ path: "/contact", component: showContact },
{ path: "/about", component: showAbout },
],
},
{
path: "/blog",
component: showBlog,
children: [
{ path: "", component: showPosts },
{ path: "/blog/:id", name: "post", component: showPost },
],
},
{ path: "/loading", component: showLoading },
];
// Router
const router = createRouter({
history: createWebHashHistory(),
routes: routes,
});
// App
const app = createApp(showPage);
app.use(router);
app.mount("#app");回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-10 20:41:21
感谢评论中的合生和埃斯特斯瓶。我已经了解到，有一种叫做vuex的东西将为您完成这项工作。这是语法。
main.js：
import { createApp } from "vue";
import { createStore } from "vuex";
import showPage from "./components/showPage.vue";
// Store
const store = createStore({
state() {
return {
getjson: null,
};
},
mutations: {
getfile(state) {
axios
.get("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => {
if (state.getjson == null) {
state.getjson = response.data;
}
});
},
},
});
// App
const app = createApp(showPage);
app.use(store);
app.mount("#app");在构成部分中：
<template>
<!-- run setposts before using getjson -->
{{this.setposts()}}
{{this.$store.state.getjson}}
</template>
<script>
export default {
methods:{
setposts(){
this.$store.commit("getfile");
}
}
};
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70656916
复制相关文章
相似问题
腾讯云开发者
