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

Например, пишем простой чат. Есть 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(); с сохранением реактивности?
  • Вопрос задан
  • 1159 просмотров
Пригласить эксперта
Ответы на вопрос 4
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Так напрашивается разбить прям на три компонента -- профиль, юзеры и сообщения.
Ну и vuex посмотрите.
Ответ написан
bootd
@bootd
Гугли и ты откроешь врата знаний!
Разбить всё на компоненты и внутри каждого писать свою логику.
Ответ написан
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Как уже сказали, можно использовать vuex, он будет хранить все данные и взаимодействовать с бэкендом. Ваши компоненты будут брать/передавать данные оттуда.
Если не хотите с ним заморачиваться, вы можете например в корневом компоненте осуществлять взаимодействие с сервером, и далее данные распихивать по компонентам - профиль, пользователи, сообщения, что-то еще. В вашем варианте однозначно нужно разбивать, даже потому что, если вы сделаете все в одном это будет очень большой файл, с которым будет тяжело работать и всякое изменение будет доставлять боль и страдание)
Ответ написан
landen13
@landen13
frontend-developer
Модульность Vue приложений требует в первую очередь хранилище (хотя кто-то может и не согласиться - ибо без хранилища можно, пожалуй, и обойтись).
Vuex - достаточно прост и понятен, можно освоить азы за полчаса, поковыряв документацию.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы