首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Vue.js生命周期事件以及从哪里开始加载存储属性(Vue.observable)

Vue.js生命周期事件以及从哪里开始加载存储属性(Vue.observable)
EN

Stack Overflow用户
提问于 2019-05-13 17:37:17
回答 1查看 78关注 0票数 0

我使用Vue.observable()来管理状态,并且在vue-router加载大多数视图之前,需要等待两个存储属性被填充。

我尝试将加载放在beforeCreate中,在App.vue中创建并挂载生命周期事件,因为它是我的web应用的根:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template lang='pug'>
#app
  AppHeader
  router-view
  AppFooter
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import AppHeader from '@/components/AppHeader.vue'; // @ is an alias to /src
import AppFooter from '@/components/AppFooter.vue';
import { mutations } from '@/store';

@Component({
  components: {
    AppHeader, AppFooter
  }
})
export default class App extends Vue {
  private async beforeCreate(): Promise<[void, void]> {
    return await Promise.all([ mutations.clientSet(), mutations.productsSet()]);
  }
}
</script>

但是vue路由器在promises有机会解析之前加载依赖于这些状态属性的其他视图。我的所有视图都依赖于要填充的属性,因此将return await Promise.all([ mutations.clientSet(), mutations.productsSet()]);移到它们的生命周期事件处理程序中效率不高。

有没有更好的地方来运行这段代码,这样它就可以保证在vue路由器加载视图之前完成?

EN

回答 1

Stack Overflow用户

发布于 2019-05-13 18:26:53

我修改了两个属性中每个属性的存储,将它们更改为promises (而不是result)。在需要视图中的值的任何地方,我现在都在等待这些值。

这允许UI快速加载,并且只在需要的地方等待。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56117335

复制
相关文章
NEO4J 图数据库哪里和哪里 从哪里开始
上期已经安装了图数据库,本期就该讨论到底这个图数据库里面的一些基本的概念和如何操作。最近听到一句话,年轻不年轻,不是看年龄,而是看你对新鲜事物的热情,即使你20岁,谈起新事物也是一脸的不屑,只能说明身体和灵魂分了家。闲话不谈 回归正题。
AustinDatabases
2020/05/09
3K0
从0开始Vue.js 和 Webpack 4 [1]
核心目标 使用webpack-dev-server热加载模块 使用eslint文件瘦身 使用stylus进行CSS预处理 使用@ vue / test-utils和Jest进行测试 环境需求 npm init -y npm install --save vue vue-router npm install --save-dev webpack webpack-cli 文件结构 [文件结构] app.js : 应用程序入口 App.vue: 根组件 pages: 包含所有顶级组件的文件夹,每个组件都有一个
bit20041436
2018/09/05
1.3K0
从0开始Vue.js 和 Webpack 4 [1]
从0开始Vue.js 和 Webpack 4 [2]
原因:当配置index.html时,指定了javascript的具体路径,为了使热模块重新加载工作,需要允许注入此路径,这样就可以实时更新html了。
bit20041436
2018/09/05
1.1K0
react源码中的生命周期以及事件系统
因为前面也讲到jsx在v17中的编译结果,除了标签名,其他的挂在标签上的属性(比如class),事件(比如click事件),都是放在_jsxRuntime.jsx函数的第二参数上。表现为key:value的形式,这里我们就会产生几个问题。
flyzz177
2023/01/02
6630
【JavaWeb】86:jQuery的属性、文档、动画以及事件
昨天学习了jQuery中的选择器,有一些还没有学完全,只能说等到以后遇到了再查文档了。
刘小爱
2020/07/30
2.5K0
【JavaWeb】86:jQuery的属性、文档、动画以及事件
Mysql存储过程从0开始(上)
1、首先你要明白,mysql也是一种语言,他也可以编写程序,也是支持逻辑判断,if,elseif,else,switch,while等等的判断 2、mysql赋值一个变量的值操作:set @a = 1; 查看这个变量为select @a; 3、当你创建存储过程的时候你要先选择Mysql的数据库,然后才能进行操作,比如创建 (1)create procedure hanshuming() //方法体: select concat(@a,' world'); concat是链接字符串,set @a="He
思梦php
2018/03/09
1.2K0
Mysql存储过程从0开始(上)
vue.js 事件
1.使用事件的第一种方式: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src='vue.min.js'></
贵哥的编程之路
2021/03/02
6.1K0
vue.js 事件
Backstage听起来不错,应该从哪里开始呢?
Backstage 最大的优点之一也带来了无休止的挑战:Backstage 是高度可定制的,允许你轻松构建适合组织需求的独特开发人员门户。这种灵活性的缺点是很难知道从哪里开始。Backstage 可以做很多事情——整合你的技术基础设施和开发人员经验的每个部分——但如果你开始构建一个开发人员门户没有一个计划,很容易被所有的可能性所淹没。为了帮助你形成你的计划,这篇文章将详细介绍 Spotify 是如何设计我们的内部门户的,并为你在设计和构建自己的门户时推荐潜在的模型。
CNCF
2021/07/07
3.2K0
web前端学习知识很多,从哪里开始学习呢
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才。许多学生,包括以前的UI,java,或完全零基础,想学习的前端。许多初学者说,当他们看到前端密集的知识点时会感到头晕目眩。事实上,前端是一个宽泛的主题。但你需要学习前端你不必惊慌,虽然内容比较多,但不是没有规律可循,只要一步一步地不怕学习不好的前端!
千锋哈尔滨IT培训
2019/12/10
5100
web前端学习知识很多,从哪里开始学习呢
Android开发之Activity的生命周期以及加载模式
本篇博客就来好好的搞一下Activity的生命周期,如果搞过iOS的小伙伴的话,Activity的生命周期和iOS中ViewController的生命周期非常类似。生命周期,并不难理解。一个人的生命周期莫过于生老病死,花儿的生命周期就是花开花谢了。在Android中Activity的生命周期莫过于Activity的创建到消亡的过程了。本篇博客就会介绍Activity生命周期中的不同阶段,通过实例的形式来窥探一下Activity的生命周期。搞明白Activity的生命周期是至关重要的,因为只有搞明白每个生命周
lizelu
2018/01/11
1.1K0
Android开发之Activity的生命周期以及加载模式
前端系列第5集-Vue系列
Vue是一款流行的前端JavaScript框架,它采用了MVVM(Model-View-ViewModel)设计模式。Vue具有易学易用、高效灵活等特点,可以帮助开发者构建交互性强、响应式、可维护的Web应用程序。
达达前端
2023/10/08
1880
重磅来袭~~~ Vue原来可以这样写,开发效率杠杠的
每天上班写着重复的代码,当一个cv仔,忙到八九点,工作效率低,感觉自己没有任何提升。如何能更快的完成手头的工作,提高自己的开发效率,在上一篇《绝对干货~!学会这些Vue小技巧,可以早点下班和女神约会了》,小编整理了一些Vue开发技巧,今天小编又整理了一些新的Vue使用技巧。你们先加班,我先下班陪女神去逛街了。
前端进击者
2021/07/27
5190
实战技巧,Vue原来还可以这样写
每天上班写着重复的代码,当一个cv仔,忙到八九点,工作效率低,感觉自己没有任何提升。如何能更快的完成手头的工作,提高自己的开发效率,在上一篇《绝对干货~!学会这些Vue小技巧,可以早点下班和女神约会了》,小编整理了一些Vue开发技巧,今天小编又整理了一些新的Vue使用技巧。你们先加班,我先下班陪女神去逛街了。
前端进击者
2021/07/27
4900
Vue.js 计算属性
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
陈不成i
2021/07/27
4.6K0
vue.js 属性(核心)
如果是使用v-bind:src=“url"vue的方法,就可以不加模板{{}} 使用原生的方法src=”"就要加模板{{}}.
贵哥的编程之路
2021/03/02
1.2K0
vue.js 属性(核心)
Vue.js 监听属性
以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法: kilometers 和 meters。
陈不成i
2021/07/27
8.2K0
vue.js 键盘事件
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src='vue.min.js'></script> <style type="text/css"> body,html{width: 100%;height: 100%;} </style> </head> <body @keydown.
贵哥的编程之路
2021/03/02
4.1K0
vue.js 键盘事件
2023金九银十必看前端面试题!2w字精品!
答案:CSS的盒模型是用于布局和定位元素的概念。它由内容区域、内边距、边框和外边距组成,这些部分依次包裹在元素周围。
肥晨
2023/09/11
4970
2023金九银十必看前端面试题!2w字精品!
vue.js 事件对象
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script type="text/javascript" src='vue.min.js'
贵哥的编程之路
2021/03/02
2.6K0
vue.js 事件对象
从0开始做播放器---Android生命周期
https://blog.csdn.net/hellofengyu/article/details/78001960
瑶瑶
2020/08/11
3900
从0开始做播放器---Android生命周期

相似问题

构建Vpn -如何开始以及从哪里开始

11

属性错误-从哪里开始

113

wse 3.0或wcf以及从哪里开始

21

事件冒泡/捕获-从哪里开始/结束?

24

在哪里存储Vue.JS/Vuex的加载/错误状态?

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文