Дата последнего изменения: 30.04.2019
Vuex: подключение и использование |
Для начала работы необходимо подключить Bitrix CoreJS расширение
ui.vue.vuex
Доступно с ui 18.5.1.
в вашем компоненте или на php-странице с помощью \Bitrix\Main\UI\Extension::load("ui.vue.vuex");
При создании нового экземпляра нужно указать, какое хранилище планируется использовать, если у вас одно хранилище:
const store = BX.Vuex.store( { state: { data: {a: 1, b: 2, c: 3} }, actions: { change(store, payload) { store.commit('changeData', payload); } }, mutations: { changeData(state, params) { if (typeof params.a === 'number') { state.data.a = params.a; } if (typeof params.b === 'number') { state.data.b = params.b; } if (typeof params.c === 'number') { state.data.c = params.c; } } } }); const templateEngine = BX.Vue.create({ el: this.rootNode.firstChild, store: store, template: '<bx-root-component/>', });
Если у вас несколько независимых хранилищ, используйте модульную систему:
const store = BX.Vuex.store( { modules: { dataStore1: { namespaced: true, state: { data: {a: 1, b: 2, c: 3} }, actions: { change(store, payload) { store.commit('changeData', payload); }, }, mutations: { changeData(state, params) { if (typeof params.a === 'number') { state.data.a = params.a; } if (typeof params.b === 'number') { state.data.b = params.b; } if (typeof params.c === 'number') { state.data.c = params.c; } } } }, dataStore2: { namespaced: true, state: { data: {d: 4, e: 5, f: 6} }, actions: { change(store, payload) { store.commit('changeData', payload); }, }, mutations: { changeData(state, params) { if (typeof params.d === 'number') { state.data.d = params.d; } if (typeof params.e === 'number') { state.data.e = params.e; } if (typeof params.f === 'number') { state.data.f = params.f; } } } }, } });
При использовании модульной системы обратите внимание, что параметры внешних вызовов у функций хранилища поменяются.
При выполнении действий (actions) вместо обычного вызова:
store.dispatch('changeData', {a: 11})
Укажите действие вместе с namespace:
store.dispatch('dataStore1/changeData', {a: 11})
При выполнении изменения данных (mutation) вместо обычного вызова:
store.commit('changeData', {b: 22})
Укажите мутацию вместе с namespace:
store.commit('dataStore1/changeData', {a: 22})
Для использования данных хранилища в шаблоне компонентов необходимо, чтобы компонент задекларировал использование этих значений в шаблоне через вычисляемые свойства.
Чтобы вручную не прописывать все элементы структуры, воспользуйтесь вспомогательной функцией mapState
:
BX.Vue.component('bx-button-counter', { computed: { counterName(state) { return state.data1.c+' шт.'; }, ...BX.Vuex.mapState({ data1: state => state.dataStore1.data, data2: state => state.dataStore2.data }) }, template: '<div>Счётчик кликов — {{ counterName }}</div>'' });
Подробнее об этом можно прочитать в
документации.
Состояние
Vuex использует единое дерево состояния — когда один объект содержит
всё глобальное состояние приложения и служит «единственным
источником истины». Это также означает, что в приложении будет только
одно такое хранилище. Единое дерево состояния позволяет легко найти
нужную его часть или делать снимки текущего состояния приложения
в целях отладки.
Единое дерево состояния не противоречит модульности — в следующих
главах мы изучим, как можно разделить состояние и мутации на под-модули.
Подробнее...