В этой истории мы создадим образец приложения To Do, используя Vuex и TypeScript. Vuex - это библиотека управления состоянием + шаблон для приложений Vue. Есть несколько концепций, связанных с Vuex, которые нам нужно понять, и они описаны ниже:

  1. Магазин: это неизменяемый центральный контейнер для хранения состояния приложения. Единственный способ изменить состояние хранилища - это совершить мутации.
  2. Мутации: это методы, с помощью которых мы изменяем состояние магазина. Мы получаем состояние хранилища и полезную нагрузку - объект, который мы можем передать из компонентов Vue для хранения и выполнения мутаций в состоянии. Мутации - это синхронные транзакции. Мутации фиксируются с помощью оператора фиксации, например. store.commit('increment')
  3. Действия. Действия используются для фиксации мутаций и могут быть асинхронными. Действия также являются методами и получают контекст как параметр. Контекст имеет те же методы / свойства, что и хранилище, но на самом деле контекст не является хранилищем. Итак, мутации совершаются с использованием context.commit('increment'). Действия запускаются из компонентов Vue с использованием store.dispatch('increment'), где приращение - это имя действия.
  4. Модули. Чтобы упростить большой магазин, Vuex позволяет разделить магазин на модули. Каждый модуль может содержать собственное состояние, мутации, действия и даже вложенный модуль.

У нас будет больше понимания, когда мы создадим магазин для приложения ToDo.

Первый шаг к использованию Vuex в приложении Vue - его установка с помощью npm. Если мы использовали пользовательский интерфейс Vue CLI, то Vuex можно было бы добавить при создании самого нового приложения. Я хотел бы порекомендовать использовать Vue CLI для создания нового проекта с TypeScript и Vuex. Пример приложения, который мы сейчас разрабатываем, будет включать создание хранилища Vuex и его использование в компоненте Vue.

Установка и настройка

Установка NPM

npm install vuex --save

Добавьте store.ts файл в папку src. Добавьте строки ниже, чтобы использовать Vuex. Vue.use(Vuex) требуется, когда Vuex используется в модульных системах, то есть Vuex устанавливается через NPM / CLI.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Добавить магазин Vuex

Создайте store.ts, если не существует, объявите Vuex Store для приложения ToDo, как показано ниже.

ToDoModel.ts - модель для ToDo App объявлена ​​в папке src/models как

Мы определили состояние хранилища как массив модели ToDo. Обратите внимание, что мы инициализировали состояние хранилища с помощью Array<ToDoModel>(). Это создаст пустой массив типа ToDoModel. Затем при мутациях мы обновили состояние хранилища, поместив новый элемент ToDoModel в массив состояний todos. Затем в действиях мы совершаем мутации. Обратите внимание, как мы получаем полезную нагрузку как ToDoModel в качестве второго аргумента в Mutations and Actions.

Компонент ToDo

Теперь давайте разработаем компонент ToDo. Сначала мы создадим компонент без использования магазина, а затем добавим функциональность, связанную с магазином. Это позволяет легко понять, какие изменения необходимы для использования Vuex. Хотя нижеприведенный компонент кажется большим количеством кода, он прост - мы добавили шаблон, использовали классы начальной загрузки для стилизации, в шаблоне есть текстовое поле для заголовка ToDo и один флажок, чтобы пометить его как завершенное. Мы поддерживаем ToDo Array - ToDos, который на самом деле является Getter для хранения и отображения его в виде упорядоченного списка ToDo.

Интеграция Vuex в компонент Vue

Сначала импортируйте store из Store.ts, который мы создали для приложения ToDo.

import store from "@/store";

Обновите ToDos Getter, чтобы использовать магазин

get ToDos(): ToDoModel[] {
   let todos = this.$store.state.todos; //this.todos;
   return todos;
}

Убедитесь, что для main.ts задано store

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

Точно так же, чтобы добавить новый ToDo update метод addToDo с this.$store
.dispatch("addToDo", this.model). Мы могли бы пойти еще дальше и использовать обещание для работы Async. Нам также нужно обновить действие, чтобы вернуть обещание. Это было бы полезно при хранении данных с помощью HTTP-вызова.

AddToDo() {
    this.message = `Adding ${this.model.Name} to ToDo List ...`;
    if (this.ToDos.some(x => x.Name == this.model.Name)) {
      this.message = `ToDo item ${this.model.Name} already exists in your list`;
      return;
    }
// this.todos.push(this.model);
this.$store
      .dispatch("addToDo", this.model)
      .then(() => {
        this.message = "ToDo added successfully to your list";
        setTimeout(() => {
          this.message = "";
        }, 1500);
      })
      .catch(error => {
        console.error(error);
      });
this.model = new ToDoModel();
  }

store.ts

addToDo(context, todoModel: ToDoModel) {
      return new Promise((resolve, reject) => {
        context.commit('addToDo', todoModel);
        resolve();
      });
}

Это все, что нужно, мы внедрили Vuex в наше приложение ToDo. Теперь запустите приложение и убедитесь, что список дел работает правильно.

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