Почему VueX — идеальный интерфейс между интерфейсом и API

Оригинальный адрес:Why VueX Is The Perfect Interface Between Frontend and API

Оригинальный автор:KBall

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:zhmhhu

Корректор:sunui, Teiyanana

Фронтенд веб-разработкаповышенная сложностьЭто способствует специализации внешнего интерфейса и разделению внешнего интерфейса.

Это увеличение специализации и сложности имеет много преимуществ: качество взаимодействия с пользователем в Интернете будет расти в геометрической прогрессии, и в то же время больше людей будут подключаться друг к другу через несколько устройств, чем когда-либо прежде.

Тем не менее, это также приносит некоторые проблемы.

Задача: интеграция между интерфейсом и API

Трения, проблемы и сложность интерфейса между интерфейсом и API — распространенная проблема.

В идеале серверная часть и внешний интерфейс должны гармонично сосуществовать благодаря тесному взаимодействию, а данные, предоставляемые серверной частью, точно соответствуют данным, требуемым интерфейсом.

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

Типичное решение

В результате получается поток, который обычно выглядит следующим образом:

Создавайте пользовательские интерфейсы, используя фальшивые «заглушки» («заглушки») данных, либо встроенные непосредственно в шаблоны и код, либо загружаемые через набор инструментов.
Когда API будет готов, быстро замените каждую точку интеграции реальными вызовами и данными API.

Проблема с этим подходом двояка:

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

Лучшее решение: VueX

Если вы используете Vue.js для разработки своего внешнего интерфейса, лучшее решение этой проблемы у вас под рукой.

Глубоко интегрирован в VueVueXБиблиотека предоставляет идеальное решение для созданияЧистый,Изолированныйинтерфейс, упрощающий переход между заглушенными данными и фактическим API.

Что такое VueX

VueX — это библиотека управления состоянием, разработанная на основе архитектур Flux, Redux и Elm, специально разработанная и настроенная для хорошей интеграции с Vue.js и использования реактивных функций Vue.

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

Библиотеки, такие как VueX, могут управлять общим состоянием между компонентами структурированным и удобным для сопровождения способом, создавая глобальное дерево состояний, в котором каждый компонент может быть доступен и обновлен структурированным образом.

Как работает VueX

VueX делит управление состоянием на 3 ключевые части:state,mutationsа такжеactions. Когда вы создаете экземпляр хранилища VueX, вы можете определить эти три объекта:

const store = new Vuex.Store({
    state: {
    ...
    },
    mutations: {
    ...
    },
    actions: {
    ...
    }
})

State

Состояние представляет сами фактические данные. Это просто объект JavaScript, содержащий дерево данных. В VueX вы можете иметь единое глобальное дерево состояний или организовать его по модулям (например, дерево состояний пользователя, дерево состояний продукта и т. д.).

Например, мы можем использовать это дерево состояний для отслеживания нашего текущего пользователя, начиная с нуля, если пользователь не вошел в систему:

state: {
    currentUser: null
}

Mutations

Мутации — это наш механизм изменения дерева состояний. все изменения состояниядолженЭто делается с помощью мутаций, которые позволяют VueX управлять состоянием предсказуемым образом.

Пример мутации может выглядеть так:

mutations: {
    setCurrentUser(currentState, user) {
    currentState.currentUser = user;
    }
}

Мутации естьСинхронный,а такженепосредственныйИзменяет объект состояния (например, по сравнению с Redux существует эквивалентная концепция, называемая редуктором, и возвращаетnewобъект).

Это синхронное прямое изменение объектов состояния идеально соответствует концепции реактивности Vue. Объекты состояния VueX являются реактивными, поэтому эти изменения распространяются на все зависимости.

ты можешь пройтиcommitфункция для вызова мутации:

store.commit('setCurrentUser', user);

Actions

Действия — это последняя часть VueX.намерениеа такжеИсправлятьпосредник между.

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

Асинхронность позволяет действиям обрабатывать такие вещи, как вызовы API, взаимодействие с пользователем и весь поток действий.

В качестве простого примера действие может сделать вызов API и зарегистрировать результат:

actions: {
    login(context, credentials) {
    return myLoginApi.post(credentials).then((user) => {
        context.commit('setCurrentUser', user)
    })
    }
}

Действия могут возвращать обещания, позволяя представлениям или другому коду отправлять действия, ждать их завершения и отвечать на основе их результатов. вы должны использоватьdispatchотправить действие. Вместо того, чтобы использоватьcommit. Например, наш код вызова может выглядеть так:

store.dispatch('login', credentials).then(() => {
    // 重定向到登录区域
}).catch((error) => {
    // 显示有关错误密码的消息
});

Почему действия VueX — идеальный интерфейс для вашего API

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

Обычной практикой для этого сценария является использование соответствующих заполнителей и текста в интерфейсном шаблоне, как если бы это был чисто статический шаблон или содержимое.

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

Они часто сопряжены с одной и той же проблемой: когда серверная часть наконец-то доступна, требуется много рефакторинга, чтобы получить реальные данные.

Даже если структура данных из бэкенда (чудесным образом) соответствует вашей канонической нотации, вам все равно придется копаться, чтобы найти каждую точку интеграции. Если структура отличается (скажем прямо, обычно так и есть), вам нужно не только это сделать, но и выяснить, как изменить внешний интерфейс или создать уровень абстракции, который преобразует данные.

Введите действия VueX

Прелесть VueX в том, что действия обеспечиваютидеальноспособ изолировать и абстрагировать внешний и внутренний интерфейс, а также работать таким образом, чтобы обновление от заглушенных данных до реального внутреннего интерфейса было бесшовным и простым.

Давайте расширяться. Возьмите нашу функцию входа в качестве примера. Если наш API входа еще не существует, но мы все еще готовы создать внешний интерфейс, мы можем реализовать его следующим образом:

actions: {
    login(context, credentials) {
    const user = MY_STUBBED_USER;
    if(credentials.login === '[email protected]') {
        context.commit('setCurrentUser', user)
        return Promise.resolve();
    } else {
        return Promise.reject(new Error('invalid login'));
    }
    }
}

Теперь наш интерфейс может реализовать метод входа через тестовые данные, и этот метод входа также будет использоваться в будущем.такой жеТаким образом, могут быть реализованы как успешные, так и неудачные запросы на вход в систему. Такое поведение будетнемедленноПроисходит это не асинхронно через API, а путем возврата промисов, и теперь любой вызывающий объект может рассматривать это как настоящий вызов API.

Когда наш API доступен, мы можем просто изменить это действие, чтобы использовать его, и все остальное в нашей кодовой базе останется прежним.

Обработка несоответствий данных

Изоляция наших вызовов API от VueX также дает нам чистый и элегантный способ справиться с несоответствием формата данных между серверной частью и интерфейсом.

Продолжая наш пример входа в систему, возможно, мы предполагаем, что API вернет всю информацию о пользователе, которая нам нужна при входе в систему, но нам нужно получить настройки из отдельной конечной точки после аутентификации, даже если это в другом формате, чем мы ожидали.

Мы можем полностью изолировать эту разницу в наших действиях VueX, избавляя нас от необходимости изменять что-либо еще в нашем интерфейсе. Поскольку промисы могут быть связаны и вложены друг в друга, мы можем выполнить серию вызовов API, которые необходимо выполнить, прежде чем наше действие будет считаться завершенным.

actions: {
    login(context, credentials) {
    return myLoginApi.post(credentials).then((userData) => {
        const user = { ...userData };
        return myPreferencesApi.get(userData.id).then((preferencesData) => {
        user.preferences = transformPreferencesData(preferencesData);
        context.commit('setCurrentUser', user)
        });
    })
    }
}

Измените и отправьте из нашего состояния в нашloginС точки зрения кода действия конечным результатом являетсяточно так жеиз.

С Vuex задача интеграции новых или изменяющихся внутренних API-интерфейсов в наш внешний интерфейс значительно упростилась.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.