Vue-JS: как менять вьюшки в зависимости от типа пользователя?

Question

[beduin01]

Есть страница. На ней панель. Нужно каждому типу пользователей: гость, залогиненый, админ показывать разные ссылки на ней. Не могу понять правильно ли я думаю, что пытаюсь сделать именно так:

var userMenu = Vue.component("usermenu", Vue.extend({
    template: "#usermenu",
    components: {
     guestView: Vue.extend({
        template: `
              <p>Quest</p>
            `}),

      userView: Vue.extend({
        template: `
                <p>User</p>
            `}),     

      adminView: Vue.extend({
        template: `
                <p>Admin</p>
            `})

    }

Vue.component('usermenu', userMenu)

Как вообще в vue-js компоненты переключать правильно? Чтобы другой отобразить? Как им состояние передавать? Глобальную переменную какую-то делать или что?

Comments

[lega]

На Angular Light можно сделать как-то так jsfiddle.net/lega911/febtb7v6

[beduin01]

lega: блин, реально очень красиво. А в каких случаях АнгуларЛайт будет лучше vue и простого ангулара?

[lega]

beduin01: Они примерно взаимозаменяемые, Angular Light более низкоуровневый, поэтому он проще ну и менее популярен.

[kartio]

Извините конечно, но это не красивый пример, а очень вредный пример, как делать не стоит. Нужно изначально человеку дать понять, как правильно нужно строить структуру приложения в виде компонентов и тогда он будет делать это независимо от фреймворка, потому что они все похожи, просто реализованы чуть по-разному. На вуе отобразить такой текст внутри дива можно ровно так же, с такой же "красотой", только вот когда начнется усложение логики и для пользователя нужно будет отобразить его имя, да еще когда по клику на имени нужно будет открыть попап или отработать свою логику, то вся красота поплывет и начнется головная боль.
А вот когда человек поймет суть всего этого, тогда уже сможет сознательно выбрать себе фреймворк под нужные задачи.

Answer 1

[kartio]

<component :is="view"></component>

соответственно параметр view менять в зависимости от состояния пользователя

Comments

[beduin01]

kartio а установки вида в `data` пихать?

[beduin01]

И еще не подскажите, в каких случаях нужно создавать новые экземпляры Vue ? Я просто не совсем архитектуру понимаю

[kartio]

Вуе сам создает для компонентов свои экземпляры, создается только первый самый верхний компонент, в шаблоне которого уже используются другие компоненты. Соответственно каждый экземпляр компонента может иметь свои данные и параметры (с данными при этом есть тонкий момент, когда в описании компонента data должно быть либо объектом и тогда свойства этого объекта будут доступны каждому экземпляру компонента, либо функцией, чтобы при создании экземпляра компонента создавался новый объект данных).
Установку вида можно задавать по разному: иметь под это параметр в секции данных - объекте data, принимать значение сверху как параметр, делать это вычисляемым свойством (computed). Все зависит от потребностей.