Для чего следует использовать Vue.observable?

Question

[beduin01]

Прочитал тут статью о Vue.observable.
В статье есть пример.

import Vue from vue;

const state = Vue.observable({
  counter: 0,
});

export default {
  render() {
    return (
      <div>
        {state.counter}

        <button v-on:click={() => { state.counter++; }}>
          Increment counter
        </button>
      </div>
    );
  },
};

Я не совсем понимаю чем указанный инкремент будет отличаться от инкремента переменной размещенной в секции `data`

Можно ли использовать новую фишку как замену шины Vuex?

Comments

[askhat]

С точки зрения пользователя (пользователя Vue)—ничем

[McBernar]

Я, честно говоря, тоже не понял. Смысл этого, если есть простой и удобный Vuex?

Answer 1

[Alex]

Vue.observable позволяет создавать объекты, не привязанные к конкретному компоненту, изменения в которых будут вызывать перерисовку всех зависимых елементов.

Грубо говоря, это более низкий уровень абстракции. Когда вы создаёте обект в секции data где-то там, внутри Vue используется Vue.observable. Просто сейчас эта функция стала доступной глобально

Comments

[beduin01]

А можно ли это использовать вместо шины Vuex?

[Alex]

beduin01, Не знаю. Но я бы не стал. Как не стал бы вообще применять Vue.observable кроме каких-то очень специфических случаев (с которыми я ещё не стыкался).

Если я не ошибаюсь, то эта функция — предназначена для тех случаев, когда у вас маленький проект. Либо на Vue построет один небольшой елемент на странице. Когда у вас нету дерева компонентов. А нужно лишь чтобы одни данные зависили от других. В таком случае вам нет нужды создавать целый инстанс Vue. Можно обойтись только Vue.observable

Для более сложных задач, я бы советовал придерживатся традиционного подхода. Иначе это превратится в ад — когда куча компонентов зависит от разных данных, которые берутся откуда-то, неясно откуда и как изменяются.

Answer 2

[profesor08]

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