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:
- Наблюдать/не наблюдать
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 и Vue2.x.
В настоящее время Vuez совместим как с Vue1.x, так и с 2.x. Как новорожденный проект, Vuez в настоящее время находится в стадии быстрого развития, и у него есть много возможностей для улучшения. Поэтому, пожалуйста, дайте несколько предложений, проблем, с которыми вы столкнулись при использовании, и PR, если вы заинтересованы. Чем больше, тем лучше! :)
Еще раз спасибо за ваше время.