Как загрузить компонент vue в файл js

Question

Я бы получил следующее поведение: если в моей базе данных присутствует определенное условие, я бы вместо указанного указывал c vue .component. Другими словами, у меня есть файл с именем discover.js, который внутри него имеет следующий код:

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

Я бы назвал DiscoverComponent.vue только если пользователь (поэтому в БД задается специфика c логическое как истина) и в противном случае я бы назвал другой компонент. Это пример псевдокода:

If flag is true:

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

Else:

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

Должен ли я использовать вызов AJAX в этом файле. js, чтобы загрузить значение flag? Это le git? Или это плохая практика для вызова данных внутри файла js вместо контроллера?

Answer 1

В этом случае, я думаю, вы можете использовать компоненты asyn c. Примерно так:

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');
})

Ссылка на страницу документации компонентов asyn c: https://vuejs.org/v2/guide/components-dynamic-async.html#Async -Компоненты

Answer 2

Я бы лучше сделал это так:

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>
    `
})