Vue 更新数据 页面刷新

我一直采取的方式

比如我一开始有列表数据，我要删除某一数据，之后删除接口请求成功之后，最后重新请求列表数据接口。

是不是你跟我一样，

今天看见一篇文章 利用 provide和inject 处理 刷新页面问题

provide / inject官网文档链接

PS：provide和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

本文以真实接口调试，童叟无欺。

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isRouterAlive: true,
    };
  },

  // 父组件中返回要传给下级的数据
  provide() {
    return {
      reload: this.reload,
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    }
  }
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

About.vue

<!-- about -->
<template>
  <div :style="{ scrollTop:num}">
    <div style="height:1000px"></div> // 测试位置的，让页面一定高度
    <div>测试</div>
    <ul>
      <li
        v-for="(item, index) in aboutList"
        :key="index"
      >
        {{ item.title }}
        <button @click="deleteItem(item._id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  inject: ["reload"],
  data() {
    return {
      aboutList: [],
      page: 1,
      num: 0
    };
  },
  created() {
    this.getDate();
  },
  methods: {
    getDate() {
      axios({
        url: "https://xxxxxxx/api/book/bookCategory/cateList",
        params: {
          parentId: "5d773a3db25278222ee1721a"
        }
      }).then(res => {
        this.aboutList = res.data.data;
      });
    },
    deleteItem(bookCate_id) {
      axios({
        url: "https://xxxxx/api/book/bookCategory/deleteBookCate",
        method: "POST",
        data: {
          bookCate_id
        }
      }).then(res => {
        if (res.data.status == 0) {
          this.reload();
          const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
          this.num = scrollTop  // 删除当前元素，保留当前位置
        }
      });
    }
  }
};
</script>
<style lang="css">
li {
  height: 100px;
}
</style>