如何在js文件中加載vue組件

Question

我將獲得以下行為：如果在我的數據庫中存在某個條件，我將加載特定的 vue.component 而不是另一個。 換句話說，我有一個名為discover.js的文件，其中包含以下代碼：

Vue.component(
    'discover-component',
    require('./components/DiscoverComponent.vue').default
);

只有當用戶（因此在數據庫中將特定的布爾值設置為 true）時，我才會調用DiscoverComponent.vue ，否則我會調用另一個組件。 這是偽代碼中的一個示例：

If flag is true:

    Vue.component(
        'discover-component',
        require('./components/TrueDiscoverComponent.vue').default
    );

Else:

    Vue.component(
        'discover-component',
        require('./components/FalseDiscoverComponent.vue').default
    );

我應該在這個文件 .js 中使用 AJAX 調用來加載flag的值嗎？ 合法嗎？ 還是在 js 文件而不是控制器中調用數據是一種不好的做法？

Answer 1

我寧願這樣做：

import FalseDiscoverComponent from './components/FalseDiscoverComponent.vue'
import TrueDiscoverComponent from './components/TrueDiscoverComponent.vue'


Vue.component({
    'discover-component',

    components: {
        FalseDiscoverComponent, TrueDiscoverComponent 
    }

    template: `
        <div>
            <true-discover-component v-if="contidion" />
            <false-discover-component v-else />
        </div>
    `
})

Answer 2

在這種情況下，我認為您可以使用異步組件。 像這樣的東西：

Vue.component('discover-component', async () => {
  const response = await fetch('/get-user'); 
  const user = await response.json();
  if (user.flag) {
    return import('./components/TrueDiscoverComponent.vue');
  }
  return import('./components/FalseDiscoverComponent.vue');
})

異步組件文檔頁面的鏈接： https ://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components