nuxt的asyncData在方法内没有办法通过 this调用

1，问题分析：

由于asyncData方法是在组件初始化前被调用的，并且是在服务端调用所以该方法是没有办法通过 this 来引用的，也就意味着只能在首次重新加载的时候调用，如果遇到了分页，当页码改变的时候不能做服务端的调用。

2，解决方法：

nuxt的官方文档中提供了watchQuery属性可以监听参数字符串的更改。

如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, …)。为了提高性能，默认情况下禁用。

如果您要为所有参数字符串设置监听，请设置： watchQuery: true.

3，watchQuery的使用方法：

首先如果要全局使用watchQuery，那就在nuxt.config.js中全局配置

module.exports = {watchQuery: true
}

如果不在nuxt.config.js中全局配置，那就默认是只在当前页面的监听

// 分页点击事件的方法pageChange (page) {this.currentPage = page//在页码改变的时候要将参数以query的形式传到路径上this.$router.push({path:'/template',query:{page:page}})
},

watchQuery其实监听的是路径上参数的变化，从而调用
asyncData方法

其原理也是利用的是a标签，但是如果用a标签去跳转的话，每次改变参数，页面就会重新去刷新，那么页面就会有抖动效果，用户体验并不好，但是watchQuery去监听的方式并不会出现这样的情况

export default {//此处的page是当前路径上参数的key名watchQuery: ['page']
}

这样就可以参数改变重新调用asyncData方法

nuxt的asyncData在方法内没有办法通过 this调用相关推荐

eclipse中用maven多模块管理，然后主项目无法调用其他被依赖项目里的方法，解决办法
eclipse中用maven多模块管理,然后主项目无法调用其他被依赖项目里的方法,解决办法参考文章: (1)eclipse中用maven多模块管理,然后主项目无法调用其他被依赖项目里的方法,解决办法 ...
spring boot: GlobalDefaultExceptionHandler方法内的友好错误提示,全局异常捕获
spring boot: GlobalDefaultExceptionHandler方法内的友好错误提示,全局异常捕获当你的某个控制器内的某个方法报错,基本上回显示出java错误代码,非常不友好,这 ...
jit 方法内联_JIT编译器，内联和转义分析
jit 方法内联即时(JIT) 即时(JIT)编译器是Java虚拟机的大脑. JVM中对JIT编译器的影响最大. 一会儿,让我们退后一步,看看已编译和未编译语言的示例. 诸如Go,C和C ++之类的 ...
jvm 方法内联_方法内联在JVM中有多积极？
jvm 方法内联在IntelliJ IDEA中使用Ctrl + Alt + M 提取方法 . Ctrl + Alt + M. 这就像选择一段代码并按此组合一样简单. Eclipse也有它 . 我讨厌 ...
方法内联在JVM中有多积极？
IntelliJ IDEA中使用Ctrl + Alt + M 提取方法 . Ctrl + Alt + M. 这就像选择一段代码并按此组合一样简单. Eclipse也有它 . 我讨厌冗长的方法. 对于我 ...
JS Array.map方法内异步方法无法同步执行
问题: JS Array.map方法内异步方法无法同步执行场景: 我们在使用map来设置每一项值的时候,涉及到异步操作,就会出现问题. 按照常规,重现出一种情形. 假设我要使用map对每一项值进行操 ...
Java方法内的局部变量是否线程安全问题
Q1:下面这个方法中的变量x是否线程安全呢? public static void method() {int x = 0;for(int i = 1;i<=10;i++) {x *= i;}S ...
解决Android Handler的handleMessage()方法内TextView.setText偶尔不执行的问题
前言最近项目中要加一个体温测量的外设模块利用android的串口通信可以完美的取到测量的体温数据获取到数据后,在用Handler发送数据到View渲染时发现一个问题就是数据能测量到但是渲 ...
android notifydatasetchanged 刷新错误,Android 调用notifyDataSetChanged方法失败解决办法
Android 调用notifyDataSetChanged方法失败解决办法如果使用ListView.GridView等进行数据展示,当绑定的数据有了更新的时候,需要实时刷新ListView,即调用 ...

nuxt的asyncData在方法内没有办法通过 this调用

nuxt的asyncData在方法内没有办法通过 this调用相关推荐

最新文章

热门文章