Приложение To-Do: Композиция API как альтернатива Vuex

Автор оригинала: Diego Palacios Lepore.

После прочтения Статья Энтони Гор о использовании нового Состав API Как какая-то замена Vuex, для меньших проектов, я взял Простое приложение Todo Я построил в кодепене, а затем я создал новый Vue 3 Приложение (используя Vue CLI) и наконец, я переместил все методы состояния и мутации из каждого компонента в один файл (Global.js – что будет что-то вроде магазина, в Vuex).

Исходный код и предисловие

Вот список исходного кода и кодепена, который я буду ссылаться в этой статье:

Кодепен: Vue to-do приложение

GitHub Repo: todo-app-vue3

NetLify: https://relaxed-yonath-fa8475.netlify.app/

Если вы посмотрите на приложение Todo, я создал в Кодепен Вы заметите, что я даже не использую Vuex, я просто использую оба реквизит передавать данные до детей и $ Emit пройти данные/сообщать до родительских компонентов.

Одно из преимуществ нового Состав API Это теперь у нас есть доступ к реактивным функциям вне компонентов, что довольно мощно.

Так вот что я сделал после создания моих Vue 3 Приложение, и помещайте код компонентов в свои собственные файлы, и в основном делая приложение, как она работает на кодепене:

Переместите функции состояния и мутации в глобальный файл

Первое, что я сделал, было создать файл Global.js в /SRC Отказ

Внутри global.js Я импортировал реактивный и readly Апис Давайте посмотрим на код в «Global.js» – добавим комментарии в фрагменте кода.

import { reactive, readonly } from "vue";

/* 
Wrapping our object with reactive() makes, 
as it clearly suggests, our object reactive 
(it even affects all nested properties).
*/

const state = reactive({
  tasks: [
     {
      id: 1,
      description: "Finish the course",
      done: false,
     }, 
     {..}, 
     {..}, 
     {..}, 
     {..}
  ],
  nextId: 6,
  tasksFiltered: [],
  activeTab: "all",
})

/* 
All these functions below are a combination of
mutations and actions (when comparing with Vuex).
But, of course, we are always free to organize our code
however we want.
*/

const filterTodos = function(filterOption) {..}

const addTodo = function(todo) {..}

const deleteTask = function(task) {..}

const toggleTaskStatus = function(task) {..}

// Export an object with the state and mutations
export default { 
  // With readonly(), we prevent our state to be mutated
  // outside of the global.js module
  state: readonly(state), 
  filterTodos, 
  addTodo, 
  deleteTask, 
  toggleTaskStatus
}

Используйте Adject/Inject

Тогда нам нужно сделать global.js (наш «пользовательский магазин») доступны для всех App.vue детские компоненты. Для этого мы должны использовать обеспечить Собственность внутри нашего App.vue Для того, чтобы сделать global.js Доступно для всех дочерних компонентов, поэтому мы импортируем global.js в Приложение И тогда мы предоставляем это.

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

Теперь скриншот каждого дочернего компонента (но помните, вы всегда можете пойти в репо и посмотрите код)

Toolist.vue.vue.

Форма

Header.Vue.Vue.

Этот подход может быть улучшен и может служить более простым альтернативом. Конечно, Vuex более отключен, и мы можем отслеживать мутации в инструментах Vue DEV. Таким образом, он всегда будет зависеть от проекта, на котором мы работаем или наш личный выбор и точка зрения.

Что вы думаете об этом подходе? У вас есть какие-нибудь предложения?

Надеюсь, вы нашли эту статью полезную! 🙂.