- создание главного файла
resources\store.js
import {createStore} from "vuex";
export default createStore({
state:{
//переменные в состоянии
test:0,//пример числовой целой переменной
},
getters:{
//функции для вычисления
},
mutations:{
//функции изменяют переменные данного модуля
},
actions:{
//функции обращаются к секциям модуля и привязанным модулям
},
modules:{
//модули, которые привязываются к данному модулю
},
});
- регистрация созданного главного файла в приложении
resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
//главный компонент
import App from '../App.vue';
import store from '../store.js';
...
//создание главного компонента и регистрация внутри других компонентов
const app=createApp(App);
app.use(store);
...
app.mount('#app');
- вызов в главном store из секции данных
в главном компоненте проекта
- в теге {{$store.state.test}}
- в скрипте this.$store.state.test
<template>
<div>
<div> {{$store.state.test}} </div>
<map-wrap/>
<map-load/>
<a @click="test">Click me!</a>
</div>
</template>
<script>
export default {
components:{
map_load,
map_wrap
},
data: () => ({
map:null,
polygons:{},
}),
methods:{
test:function(){
alert(this.$store.state.test);
}
},
}
</script>
