场景

在我们的项目中，有时候会对一个组件进行增删改查等操作，当提交数据后，我们需要对当前组件进行刷新。如不进行刷新，将获取不到最新添加 / 删除的数据。因此我们可以利用 provide / inject 来处理。


解决

首先我们需要在 App.vue 文件中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isRouterAlive: true,
    };
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

然后在 .vue 文件中注入 reload 依赖即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
export default {
  inject: ["reload"],
  data() {
    return {
      data: [],
    };
  },
  methods: {
    getData() {
      this.$http
        .get(`/xxx`)
        .then((res) => {
          this.data = res.data
          this.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>