Как использовать Vue Root вместо Vuex

Question

Всем привет. Я слышал, что можно использовать Vue Root в качестве альтернативы VUEX, хочу попробовать на практике на небольшом проекте, но не могу понять как это правильно реализовать, а главное в чём преимущества такого подхода? Прошу привести в качестве примера кусочек кода и рассказать зачем и для чего это нужно. Заранее спасибо!

Answer 1

Какая альтернатива Vuex и как для этого можно использовать состояние Vue Root объекта?

Многие уже перешли на такой подход, я тоже в своём проекте собираюсь.
Делается простой JavaScript объект с данными которые мы считаем состояние приложения.
Пример:

export default {
   userName: null,
   userRoles: [],
   itemsNumber: 0,
   someObject1 : {...},
   module1: {...},
   module2: {...},
}

В момент создания Vue Root объекта наш store объект мы передаём в data Vue Root.

import store from "store";

var app = new Vue({
  el: '#app',
  data: {
    store: store  // можно сократить на просто data: {store}
  }
})

После такой конструкции наш store стал реактивным, и где бы в приложении мы не использовали данные из него они будут автоматически меняться при изменении данных в store.

Как теперь получить доступ из любого места нашего приложения к нашему store. Есть несколько вариантов:

В script части каждого компонента использующего store делаем import store from "store";
Прописать во Vue прототип (здесь я не обсуждаю вопрос идеологии правильно так делать или нет).

import store from "store";
Vue.prototype.$store = store;

Если речь идёт о Quasar-Framework то делаем это в папке boot в соответствии с документацией.

В чём смысл такого подхода?

Очень удобный и простой когда хранилища store. Объекты, подобъекты, методы объектов и всё. Без разделения на действия actions и мутации mutations.
Более простая модульность store. Модуль достаточно просто подключить как дочерний объект store.
Не требует никаких дополнительных специфических Vuex знаний, это простой JavaScript. Бери и делай.
Не требует дополнительного времени на обучение, а в последствии для вспоминания.
Более простая структура хранилища.
Более простой и нативный способ вызова методов. Не через commit, dispatch, а просто обычный вызов JavaScript метода.
И многое другое.

Данный метод покрывает все (или почти все) возможности Vuex.

Модульность
Реактивность
Наличие синхронных и асинхронных методов
Геттеры (делаются через блок computed Root объекта)

import storeGetters from "storeGetters ";

var app = new Vue({
  ...
  computed: {
    ...storeGetters  // распаковываем гетеры сюда
  }
})

Answer 2

Решение на Vue.observable()

import Vue from "vue";

// Модуль 1
const module1 = {
    var1: "hihi1",
    var2: "hihi2",
    num1: 144,
    setVar1(st, num) {
        return module1.var1 = (st + ":").repeat(num);
    }
}

// Модуль 2
const module2 = {
    xxx: "mmm1",
    yyy: "mmm2",
    zzz: 144,
    addOneZzz(val) {
        return module2.zzz += val;
    },
    testCrossModuleMethod() {
        module1.num1 = 10000;
    }
}

// Корневой объект
const rootObj = {
    data1: 100,
    data2: "test"
}

// Наше хранилище
const store = {
    ...rootObj,
    module1,
    module2
}

// Делаем наше хранилище реактивным
Vue.observable(store);

// Теперь можно использовать из любого компонента через this.$store
Vue.prototype.$store = store;
// Для Quasar логику этой строки надо класть в boot


export default store;

БЛОГ НА HUSL

Как использовать Vue Root вместо Vuex

Ответы (2 шт):

Какая альтернатива Vuex и как для этого можно использовать состояние Vue Root объекта?

В чём смысл такого подхода?

Решение на Vue.observable()