Хотя до сих пор самым популярным решением для управления состоянием в экосистеме Vue.js был Vuex, важно не игнорировать другие интересные решения, такие как наблюдаемые и композиционные API. Написав эту статью, я предполагаю, что вы уже знаете, как использовать Vuex и как это работает? Поэтому я не буду дальше объяснять Vuex. Давайте изучим наблюдаемые и композиционные API

Проверка API Vue.observable

Vue.js 2.6 представил несколько новых функций, включая глобальный наблюдаемый API.

Теперь можно создавать реактивные объекты за пределами компонента Vue.js. Кроме того, без использования Vuex вы можете создать магазин. Его будет отлично использовать для простых сценариев, когда вам нужно разделить состояние для пары компонентов. Давайте посмотрим, как мы можем реализовать vue.observable в проекте.

Сначала создайте store.js:

import Vue from "vue";
export const store = Vue.observable({
  data: []
});
export const mutations = {
  setData(payload) {
    store.data = payload;
  }
};

Звучит довольно просто и близко к Vuex, не так ли?
Теперь вам просто нужно использовать его в компоненте. Чтобы получить доступ к состоянию, как и во Vuex, мы будем использовать вычисленные свойства и методы для мутаций:

<template>
    <div id="app">
        <button @click="fetch">Get the data</button>
<div v-if="!getData.length">Loading the data</div>
<div v-else="getData.length">
            <div v-for="data in getData" :key="data.id">
                <h5>{{ data.title }}</h5>
                <p>{{ data.description }}</p>
            </div>
        </div>
    </div>
</template>
<script>
import { store, mutations } from "./store";
export default {
  name: "app",
  computed: {
    getData() {
      return store.data;
    }
  },
  methods: {
    setData: mutations.setData,
    async fetch() {
      const req = await window.fetch("http://example.com/tasks");
      const res = await req.json();
      return this.setData(res);
    }
  }
};
</script>

Вот и все! Красиво и просто, правда? Вот как вы можете реализовать наблюдаемое.

Проверка Composition API

Посмотрим, как будет выглядеть компонент, в котором используется API композиции:

<template>
    <div>
        <input type="text" v-model="state.input" placeholder="Add New Task" />
        <input type="submit" @click="addTask()" />
        <ul>
            <li v-for="(item, index) in state.tasks" :key="item">
                {{ item }}
                <button @click="deleteTask(index)">X</button>
            </li>
        </ul>
    </div>
</template>
<script>
import { reactive } from "@vue/composition-api";
export default {
  setup() {
    const { state, addTask, deleteTask } = useTaskList();
    return {
      state,
      addTask,
      deleteTask
    };
  }
};
function useTaskList() {
  let state = reactive({
    input: "",
    tasks: []
  });
function addTask() {
    state.tasks.push(state.input);
    state.input = "";
  }
function deleteTask(index) {
    state.tasks.splice(index, 1);
  }
  return {
    state,
    addTask,
    deleteTask
  };
}
</script>

Посмотрим, что происходит в этом компоненте? Как видите, в отличие от обычных компонентов Vue здесь data и methodsoptions не существуют. Вместо этих параметров вы увидите новый метод под названием setup.

Метод setup должен возвращать объект, который будет включать все, что должно быть доступно в нашем компоненте.

Одно важное замечание: новое состояние переменной указывает на реактивные значения. Vue3 предоставляет возможность напрямую управлять отображаемыми реактивными элементами. Также ранее нам приходилось объявлять все функции в methodsoption компонента, однако в приведенном выше примере мы использовали наш созданный useTaskList метод, внутри которого мы сгруппировали функции. Он может быть в отдельном файле и импортирован в компонент для очистки.

Также важно отметить, что все, что нам нужно для доступа из шаблона, возвращается обоими методами useTaskList() и setup().

Заключение

Вот и все, что вы видели в действии этих двух вариантов. Какой из них выбрать, зависит от вас и зависит от ваших потребностей в соответствующем проекте.