vue 刷新、重新加载app

需求场景:
以vue数据可视化面板为例, 需求方要求隔一段时间当前页面重新加载页面, 从后台获取最新数据, 想到的思路有以下几种
1, 直接location.reload() 刷新整个页面
2, 设定间隔时间手动触发页面所有数据接口
3, 直接在App.vue通过修改key重新渲染<router-view :key="key" />

分析:
1, 方法1效果不美观, 页面要闪一下且有延迟
2, 法2可以实现, 页面很多的话改着很麻烦,
3, 法3符合标题的重新加载app的需求, 虽然实质上只是重新刷新App.vue下的路由组件, 但足够了, 可实现重新载入所在页面,

实现方法
实现很简单

<template>
  <div id="app">
    <!-- 定时修改key触发重新渲染 -->
    <router-view :key="key" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      key: Date.now()
    };
  },
  created() {
    setInterval(() => {
      this.key=Date.now();
    }, 3000);
  }
};
</script>

这种方法适用于从App.vue即父路由处直接触发刷新的场景, 如果是想从某个子路由页面内部触发刷新, 可以看下这个
https://blog.csdn.net/qq_16772725/article/details/80467492里的第三种方法(不推荐), 原理都是触发router-view刷新, 但是是通过provide / inject 在子组件内触发父组件内的刷新方法, 但这种方法很麻烦, 更简单的方法是用vuex修改变量控制刷新, vuex的组件间通信不像provide / inject那么麻烦

// store.js
const store = new Vuex.Store({
  state: {
    key: Date.now()
  },
  mutations: {
    increment(state) {
      state.key=Date.now();
    }
  }
});

// App.vue
<router-view :key="$store.state.key"></router-view>

// 子路由组件内, 此按钮负责刷新
<button @click="$store.commit('increment')">reload app</button>

在线地址看这里: reload app