Рубрики
Vue store.actions "Реализация в поле Actions"

Vue.Store.actions «Структура»

...
actions:{
ИмяФункции(
{state,rootState,commit,dispath,getters,rootGetters},ДопПараметр) {
...
return ...  
}
}
...
Рубрики
Vue.js Vue store Vue store.getters

Реализация вычисления в Store

...
getters:{
 ИмяГеттера1(state){
  return ...;
 },
 ИмяГеттера2(state, getters){
  return ...;
 },
 ИмяГеттера3:(state)=>(Параметр)=>{
  return ...;
 }
}
...
Рубрики
Vue store

Модульность Store

  • создание модуля store
    resources\Store\dir\ИМЯ_МОДУЛЯ.js
export const ИМЯ_МОДУЛЯ = {
 state:()=>({
  //переменная: Значение,
 }),
 getters: {
  //функция_считает(state,getters){...return}
 },
 mutations: {
  //функция(state,параметры){...}
 },
 actions: {
  //функция({state,commit,}){...}
 }
}
  • регистрация store модуля в главном store модуле
    resources\Store.js
import {createStore} from "vuex";
import {имя_модуля} from "./store/dir/имя_модуля";

export default createStore(
...
  modules:{
    ...
    ИМЯ_МОДУЛЯ:имя_модуля
  }
})
  • обращение к объекту из модуля
    в компоненте в секции template
{{ $store.Секция.ИМЯ_МОДУЛЯ.ИмяВСекции}}
Рубрики
Vue store

Создание главного Store

  • создание главного файла
    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 из секции данных
    в главном компоненте проекта
  1. в теге {{$store.state.test}}
  2. в скрипте 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>
Рубрики
Vue store

Установка Store

Глобальное состояние приложения представляет собой вынесение логики из компонентов в отдельный модуль, подключив его глобально

Установка VueX в терминале IDE приложения

npm install vuex@next --save
Глобальное состояние приложения во Vue.js
Vue.js