Еще один список Todo

Итак, в одном из моих проектов на Vue я хотел попробовать другой подход к шаблону управления состоянием в качестве дополнения (пока) к VUEX.

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

Так зачем начинать использовать Mobx?

Мне нужна была своего рода практика Model- ›View-› ViewModel для построения полей.

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

Немного поискав в Интернете, я не нашел хорошего руководства о том, как использовать его с Vue Framework.
Итак, я начал делать небольшой список задач, построенный с помощью Vue и Mobx.
Вы можете найти мой проект в моем GitHub:
https://github.com/arielbouskila/ todoListVueMobx :

Чтобы ускорить работу, я использовал vue-cli 3 в качестве шаблона.

Затем, после того, как мой проект был настроен, я установил Mobx и Mobx-vue (для привязки vue).

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

Начнем с самого простого магазина todo.js:

Как мы видим, мы импортируем «наблюдаемое», это простое слово творит «магию» для наблюдаемых полей в нашем классе.
Итак, у нас есть класс Todo с id, title и isDone.
title + isDone - Наблюдаемые поля, потому что мы собираемся наблюдать за ними в нашем компоненте.

Затем у нас есть магазин todoList.js:

Теперь мы импортируем «@ действие», этот декоратор предназначен для изменения состояния.
В нашем случае у нас есть «addTodo (title)», он добавляет новый «Todo» в наше состояние, и «removeTodo (id)», который изменяет массив задач, удаляя текущий выбранный идентификатор задачи.

другой импортируемый декоратор - «@computed». Как вы уже знаете из Vue, вычисленное возвращает состояние или некоторые вычисленные данные из состояния без каких-либо изменений в хранилище. Когда можете, вы должны использовать его, потому что он очень оптимизирован.

Итак, в нашем геттере «undones ()» мы помещаем декоратор «@computed» для возврата отмененных задач, это счетчик, который показывает незавершенные задачи в нашем списке.

Последний декоратор - это «@observable», поскольку мы помещаем его в todo.js, мы помещаем его в свойство массива todos, и этот массив будет наблюдаться в наших компонентах.

Теперь, когда мы создали магазин, давайте начнем с компонентов.

Сначала компонент «addTodo.vue»:

Здесь мы импортируем «наблюдателя» из mobx-vue на этот раз, потому что наблюдатель находится в части нашей «стороны фреймворка», чтобы связываться между компонентом и полями наблюдаемых в хранилище.
Observer componentClass сделает все наши компоненты реактивными, что означает, что каждое изменение в наблюдаемых полях в хранилище будет повторно отображать наш компонент.
Как видите, мы установили хранилище в данных как свойство vm, любой доступ к хранилищу будет из vm.

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

Для отображения списка дел у нас есть другой компонент, названный «todoList.vue»:

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

Мы просматриваем наши задачи из магазина и показываем их в нашем шаблоне.
Этот компонент использует компонент addTodo для добавления нового элемента в список.

вот и все! :-)

Вывод:

Я сделал это маленькое приложение очень быстро, просто прочитав немного руководства из mobx guide.
Mobx - действительно простая и быстрая библиотека управления состоянием, есть некоторые вещи, которые не будут работать в vue, означает, что когда вы используете Mobx, вы не можете использовать встроенные вычисленные методы vue, это означает, что все ваши вычисленные данные должны быть перемещены в хранилище.

Поэтому, если вы все еще хотите использовать Vue «VUE» или традиционным способом, я бы рекомендовал еще раз подумать об использовании этой библиотеки.

Надеюсь, вам понравилась эта статья, это моя первая статья, поэтому я буду более чем благодарен, если у вас есть какие-то заметки, советы или отзывы :) даже хорошие! :)