0
点赞
收藏
分享

微信扫一扫

vue+nuxt服务端渲染实现无痕刷新触发asyncData()更新数据

技术只适用于干活 2021-10-09 阅读 68

概况

需求如下:登录成功之后不需要重新加载页面,但是需要重新请求asyncData()来刷新数据,比如当前用户是否点赞过、收藏或者打赏过某篇文章;是否关注过某个作者,需要做个状态改变等等。

默认布局入口

可通过添加 layouts/default.vue 文件来扩展应用的默认布局。

默认布局default.vue

<template>
<div>
<router-view v-if="isShow">
<nuxt />
</router-view>
</div>
</template>

<script>
export default {
provide(){
return {
pageReload: this.pageReloadFlag
}
},
data() {
return {
isShow: true
}
},
methods: {
pageReloadFlag(){
this.isShow = false;
this.$nextTick(()=>{
this.isShow = true;
this.$router.push({
path:this.$route.path,
query:{
id: parseFloat(Math.random()*1+1,10)
}
})
})
}
}
}
</script>

登录组件login.vue

<template>
<div>
<input v-model='account' />
<input v-model='password' />
<div>
<button @click='pwdLogin'>登录</button>
</div>
</div>
</template>

<script>

export default {
inject:['pageReload'],
data(){
return:{
account:'',
password:''
}
}
methods: {
async pwdLogin() {
// trim() 去除前后空格
let data = {
account: this.account.trim(),
password: this.account.trim()
}
// 封装的请求接口
let res = await Api.pwd_Login(data)
if (res.code == 200) {
// 登录成功、无痕刷新
this.pageReload()
}
}
}
}

某篇文章页面article.vue

<template>
<div>
<div v-if="isfoucs">已关注</div>
<div v-else>关注</div>
</div>
</template>

<script>
export default {
watchQuery: ['id'],
async asyncData({ $axios }) {
// 获取用户的一些基本信息
let res = await $axios.get('你的接口');
let isfoucs = 0;
try {
isfoucs = res.isfoucs
} catch (err) {
console.log(err)
}
return {
isfoucs
}
}
}
</script>

注:
使用该watchQuery键可以设置查询字符串的监视程序(其实就是监听路由里面的query参数,参数发生改变就可以了,所以在默认布局default.vue中使用了随机数)。如果定义的字符串发生更改,则将调用所有组件方法(asyncData,fetch(context),validate,layout等)。监视默认情况下处于禁用状态,以提高性能。

如果要为所有查询字符串设置监视程序,请在nuxt.config.js设置watchQuery: true

举报

相关推荐

0 条评论