Всем привет. Я слышал, что можно использовать Vue Root в качестве альтернативы VUEX, хочу попробовать на практике на небольшом проекте, но не могу понять как это правильно реализовать, а главное в чём преимущества такого подхода? Прошу привести в качестве примера кусочек кода и рассказать зачем и для чего это нужно. Заранее спасибо!
2 ответа
Какая альтернатива 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 // распаковываем гетеры сюда
}
})
-
-
-
@doox911 Когда делал Vuex не знал что есть другие варианты. Минусов варианта с vue root не знаю. Commented 28 апр. 2020 в 11:10
-
Мне всё таки кажется что это неправильно, неправильно так использовать глобальное хранилище, для таких целей и был создан
Vuex
. Но однозначно ответ хороший !– MoloFCommented 12 июл. 2020 в 8:45 -
1Минус данного подхода в том, что это всего лишь хранилище данных, но нет централизованного способа обработки данных, через действия. Так что для простых проектов, там где не требуется постоянно использовать действия над данными из разных источников - подойдёт, но для более крупных проектов, данных подход будет только тормозить разработку. Так же в SPA разработке такое ещё подойдёт, но для SSR уже нет, потом что там нужно делать дегидрацию данных. Commented 22 окт. 2020 в 8:11
Решение на 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;
-
Vue.observable больше нет в VUE3, так что скоро этот способ будет не актуален. Ждём решения для VUE3! =) Commented 11 февр. 2021 в 11:00
-
Всегда можно в дату корневого элемента положить. А почему убрали? Как-то нелогично. Там и обратная совместимость должна быть, и вообще штука очень полезная. Commented 12 февр. 2021 в 9:19