Как сделать модульность в приложении Vue.js?

Question

[Растишка]

Например, пишем простой чат. Есть App, в нем есть в объект со списком юзеров, есть объект со списком мессаджей, профайл. Сейчас код выглядит примерно так:

var app = new Vue({
    el: '#app',
    data: {
        users: {
            list: [
                {id: '123', name: 'Vasya'}
            ]
        },

        messages: {
            list: [
                {datetime: '', text:''}
            ]
        },

        profile: {
            name: 'Petrov',
            email: 'petrov@sidorov'
        }
    },
    methods: {
        usersAdd: function () { /* some code */},
        usersRemove: function () { /* some code */},
        usersUpdate: function () { /* some code */},
        usersSomeOtherMethod: function() { /* some code */},

        messagesAdd: function () { /* some code */},
        messagesRemove: function () { /* some code */},
        messagesUpdate: function () { /* some code */},

        profileUpdate:  function () { /* some code */},
        profileSave:  function () { /* some code */},
        profileSomeOtherMethod: function() { /* some code */},
    }
});

Можно ли как то структурировать код в 3 логические модельки и работать с ними, а не с методами в глобальном скоупе?
Как сделать код более ООПшным, чтобы писать типа this.profile.update(); с сохранением реактивности?

Answer 1

[Константин Китманов]

Так напрашивается разбить прям на три компонента -- профиль, юзеры и сообщения.
Ну и vuex посмотрите.

Comments

[Растишка]

Константин Китманов, Компоненты вроде должны быть привязаны к DOM. У меня же - это все один компонент (например один мессадж с аватаркой).
Мне бы хотелось сгруппировать по объектам именно данные и их методы.

Vuex показался каким то слишком замудренным и переусложненным для моей задачи.
Может есть что то проще вуекса?

[Константин Китманов]

Растишка: ну я согласен, что у vuex есть кривая обучения, но не так страшен чорт, честно. Проще чем redux:)

Посмотрите тогда еще вот vuetips.com/simple-state-management-vue-stash
Или https://github.com/keuller/vuelm
Ну и остальное из списка state management.

Но при отсутствии опыта я бы советовал остановиться на vuex — больше шанс найти решение или получить ответ.

Answer 2

[Дима Паутов]

Разбить всё на компоненты и внутри каждого писать свою логику.

Comments

[Растишка]

Компоненты вроде должны быть привязаны к DOM. У меня же - это все один компонент (например один мессадж с аватаркой).

Мне бы хотелось сгруппировать по объектам именно данные и их методы.
Можно как то сделать?

[Дима Паутов]

Растишка: это плохо, что у вас 1 компонент на всё. Вся сила vue как и других подобных фреймворков именно в компонентах. Иначе вы можете просто писать js + html и vue вам не нужен. используя 1 компонент вы нагородите говнокода. А с компонентами вы разделите логику друг от друга, что вы и хотите

[Растишка]

Дима Турков: Неправильно выразился. У меня не всего один компонент.

У меня один и тот же компонент может использовать данные из всех 3х объектов, так что разбить на отдельные 3 компонента не получится.

И вопрос не в количестве компонентов, а в том как и где хранить общие объекты с данными и методами.

[Дима Паутов]

Растишка: vuex.

Answer 3

[Evgeny Kulakov]

Как уже сказали, можно использовать vuex, он будет хранить все данные и взаимодействовать с бэкендом. Ваши компоненты будут брать/передавать данные оттуда.
Если не хотите с ним заморачиваться, вы можете например в корневом компоненте осуществлять взаимодействие с сервером, и далее данные распихивать по компонентам - профиль, пользователи, сообщения, что-то еще. В вашем варианте однозначно нужно разбивать, даже потому что, если вы сделаете все в одном это будет очень большой файл, с которым будет тяжело работать и всякое изменение будет доставлять боль и страдание)

Comments

[Растишка]

Ну я как то так и делаю, все храню в корневом Апп, отрисовка данных уже компонентами. Вопрос в группировке данных и методов в модель.

Хотелось бы писать как то так (псевдокод):

var usersModel = {
    list: [
        {id: '123', name: 'Vasya'}
    ],

    add: function (id, name) {
        this.list.push({id: id, name: name});
    },

    update: function () {
        $.ajax();
    },

    usersSomeOtherMethod: function () {
        /* some code */
    },
};

var messagesModel = {
    list: [],

    add: function (messageText) {
        if (messageText !== '') {
            this.list.push({id: Math.random(1000), text: messageText});
        }
    },

    update: function () {
        $.ajax();
    },
};

var app = new Vue({
    el:      '#app',
    data:    {
        users:    usersModel,
        messages: messagesModel,
        profile:  profileModel,

        form: {
            textareaText: '',
        }
    },
    methods: {
        updateAll: function() {
            this.users.update();
            this.messages.update();
            this.profile.update();
        },

        addButtonClick(e) {
            this.messages.add(this.form.textareaText);
            this.form.textareaText = '';
        }
    }
});

[Evgeny Kulakov]

В принципе вы можете распределить ваши модели по компонентам и там их использовать. А в рутовом компоненте организовать взаимодействие между ними, если оно понадобиться.

Answer 4

[Богдан Духевич]

Модульность Vue приложений требует в первую очередь хранилище (хотя кто-то может и не согласиться - ибо без хранилища можно, пожалуй, и обойтись).
Vuex - достаточно прост и понятен, можно освоить азы за полчаса, поковыряв документацию.