MonguDykrai / Vuejs-State-reset-through-dependency-injection

通过依赖注入实现 Vuejs 组件不刷新的情况下重置组件所有的状态

README

项目结构

\src
  \views
    data.js
    Home.vue
  App.vue

Home.vue

核心代码

<script>
import { products } from "./data";

export default {
  inject: ["reload"],
  name: "home",

  data() {
    return {
      products,
      userInfo: {
        name: "",
        age: "",
        gender: ""
      }
    };
  },

  methods: {
    resetData() {
      this.reload();
    }
  }
};
</script>

App.vue

核心代码

<template>
  <div id="app">
    <div id="nav"></div>
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

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

data.js

export const products = {
  name: "Meta30",
  price: 4000
};

实现效果