Vue provide inject 傳遞異步請求的數據（axios）

原由

本萌新在寫項目時遇到上層組件須要跨多級組件向後代組件通訊的狀況，若是用props逐層傳遞未免過於麻煩，再加之想要傳遞的數據並非多個組件共享的因此又排除了Vuex,再一想就是一對官方不推薦使用的API了（provide/inject）。由於堅信官方不推薦使用的必定是牛X的方法，因此在項目中想使用它來半個B。不用不知道,一用嚇一跳，玩崩了woc

// App.vue
<template>
  <div id="app">
    {{res}}
    <Inject />
  </div>
</template>

<script>
import Inject from "./components/inject.vue";
import "./mock/mockServer";
import axios from "axios";

export default {
  name: "app",
  components: {
    Inject
  },
  data () {
    return {
      res: {}
    };
  },
  provide () {
    return {
      res: this.res
    }
  },
  created () {
    this.getRes()
  },
  methods: {
    getRes () {
      axios.get("/mock").then(res => {
        console.log(res)
        this.res = res.data
        // this.$set(this.res, 'list', res.data)
      })
    }
  }
}
</script>

// inject.vue
<template>
  <div>Inject obj: {{ res }}</div>
</template>

<script>
export default {
  inject: ['res']
}
</script>
複製代碼

運行結果出乎意料，inject.vue中沒有接收到res

各類百度也沒有找到合適的答案

幾天後有小夥伴提醒能夠使用Vue.set這個API實現 官方文檔

走起

// App.vue
<template>
  <div id="app">
    {{res}}
    <Inject />
  </div>
</template>

<script>
import Inject from "./components/inject.vue";
import "./mock/mockServer";
import axios from "axios";

export default {
  name: "app",
  components: {
    Inject
  },
  data () {
    return {
      res: {}
    };
  },
  provide () {
    return {
      res: this.res
    }
  },
  created () {
    this.getRes()
  },
  methods: {
    getRes () {
      axios.get("/mock").then(res => {
        console.log(res)
        // this.res = res.data
        this.$set(this.res, 'list', res.data) // #####只有這裏發生了改變#####
      })
    }
  }
}
</script>
// inject.vue 同上不變
複製代碼

哈哈^_^，數據出現了，不過對象多了一個層級

推薦閱讀:

• provide/inject
• Vue.set