Views: 2769
Last Modified: 27.04.2022
Connecting and launch
To start working, first connect the extension ui.vue3.vuex
in your extension or at the php-enabled page.
Import createStore
from ui.vue3.vuex
in your extension, create a storage and connect it via .use():
import {createStore} from 'ui.vue3.vuex';
import {BitrixVue} from 'ui.vue3';
const store = createStore({
...
});
const application = BitrixVue.createApp({
components: {
Component
},
template: '<Component/>'
});
application.use(store);
application.mount('#application');
Use the namespace BX.Vue3.Vuex
for function access and handling the page and scripts without transpiling (for example, for createStore
its BX.Vue3.Vuex.createStore
).
Example
Let's overview example of interaction. Place an element with identifier application
in your html page:
<div id="application"></div>
Execute the following code in JS extension for associating html, Vue and Vuex (it creates a storage, registers component to handle the extension and launches Vue application):
import {createStore} from 'ui.vue3.vuex';
import {BitrixVue} from 'ui.vue3';
const counterStore = {
state()
{
return {
counter: 0
}
},
actions: {
increaseCounter: (store) => {
store.commit('increaseCounter', {count: 1});
},
decreaseCounter: (store) => {
store.commit('increaseCounter', {count: -1});
}
},
mutations: {
increaseCounter: (state, payload = {}) => {
let {count = 1} = payload;
state.counter += count;
}
}
};
const store = createStore(counterStore);
const Component = {
data()
{
return {
clicks: 0
}
},
computed: {
counter()
{
return `Quantity: ${this.$store.state.counter}`;
}
},
methods: {
increase()
{
this.clicks += 1;
this.$store.dispatch('increaseCounter').then(() => {
console.log('+');
});
},
decrease()
{
this.clicks += 1;
this.$store.dispatch('decreaseCounter').then(() => {
console.log('-');
});
}
},
// language=Vue
template: `
{{counter}}
<button @click="increase">+</button>
<button @click="decrease">-</button>
(нажатий: {{clicks}})
`
};
const Application = BitrixVue.createApp({
components: {
Component
},
template: `
<Component/>
`
})
Application.use(store);
Application.mount('#application');