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

概况

需求如下：登录成功之后不需要重新加载页面，但是需要重新请求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。