Hi,

Здесь, в середине, я хочу представить новую библиотеку управления состоянием для проектов Vue.js под названием Vuez. Вы можете проверить репозиторий github по адресу: https://github.com/markselby9/vuez.

Короче говоря, Vuez — это централизованное «хранилище» мониторинга, доступное для всех ваших компонентов Vue после установки Vuez. Из каждого компонента вы можете получить доступ к магазину через this.$store.

Концепция магазина в Vuez очень проста, представьте таблицу excel с тремя столбцами: «имя», «объект», «действия». Всякий раз, когда вы заинтересованы в наблюдении за объектом или событием, вы хотели бы начать новый столбец в таблице с новым именем, с объектом, который вы планируете отслеживать. Затем поместите все, что вы хотите сделать, когда объект изменился, как функции в столбце «действия». Всякий раз, когда вы хотите позаботиться об «имени», вы используете store.observe(this_name) для наблюдения за ним, если значение столбца object изменилось, все actions, связанные с name, будут активированы.

Он имеет только два набора API:

  1. Наблюдать/не наблюдать

store.observe(name, observing_object) принимает два параметра: name — это строка для наблюдателя, аObserving_object — это объект для наблюдения. Если имя сначала создается как имя наблюдателя (впервые используется в функции наблюдения), объект будет записан. Затем каждый раз, когда функция наблюдения вызывается с именем, все действия с именем будут запускаться тогда и только тогда, когда изменяется observing_object.

store.unobserve(name) отменяет все действия и наблюдателей, связанных с именем.

2. Действие

store.action(name, action_function) принимает два параметра: name — это строка для наблюдателя, а action_function — это функция, которая действует, когда объект изменяется во время «наблюдения». Здесь action_function может иметь параметр, представляющий текущее значение объекта наблюдения.

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

Давайте проверим очень простой пример.

// Make sure to call Vue.use(Vuez) first before usage
const store = new Vuez.Store();
let changingObject = {
    number: 1
};
store.observe('changing', changingObject);
store.action('changing', (obj) => {
    console.log(obj.number);
});
observeObject.number = 2;
store.observe('changing', changingObject);  // trigger the action and console would show '2'

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

В настоящее время Vuez совместим как с Vue1.x, так и с 2.x. Как новорожденный проект, Vuez в настоящее время находится в стадии быстрого развития, и у него есть много возможностей для улучшения. Поэтому, пожалуйста, дайте несколько предложений, проблем, с которыми вы столкнулись при использовании, и PR, если вы заинтересованы. Чем больше, тем лучше! :)

Еще раз спасибо за ваше время.