2

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

2 ответа 2

4

Какая альтернатива 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. Есть несколько вариантов:

  1. В script части каждого компонента использующего store делаем import store from "store";
  2. Прописать во 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  // распаковываем гетеры сюда
  }
})
5
  • Благодарю за столь развёрнутый ответ! Commented 28 апр. 2020 в 8:32
  • А минусы? Зачем тогда сделали Vuex?
    – doox911
    Commented 28 апр. 2020 в 10:15
  • @doox911 Когда делал Vuex не знал что есть другие варианты. Минусов варианта с vue root не знаю. Commented 28 апр. 2020 в 11:10
  • Мне всё таки кажется что это неправильно, неправильно так использовать глобальное хранилище, для таких целей и был создан Vuex. Но однозначно ответ хороший !
    – MoloF
    Commented 12 июл. 2020 в 8:45
  • 1
    Минус данного подхода в том, что это всего лишь хранилище данных, но нет централизованного способа обработки данных, через действия. Так что для простых проектов, там где не требуется постоянно использовать действия над данными из разных источников - подойдёт, но для более крупных проектов, данных подход будет только тормозить разработку. Так же в SPA разработке такое ещё подойдёт, но для SSR уже нет, потом что там нужно делать дегидрацию данных. Commented 22 окт. 2020 в 8:11
1

Решение на 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;
2
  • Vue.observable больше нет в VUE3, так что скоро этот способ будет не актуален. Ждём решения для VUE3! =) Commented 11 февр. 2021 в 11:00
  • Всегда можно в дату корневого элемента положить. А почему убрали? Как-то нелогично. Там и обратная совместимость должна быть, и вообще штука очень полезная. Commented 12 февр. 2021 в 9:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.