'use strict';
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
roles: [] // Тут будут храниться роли. Массив
},
mutations: {
setRoles: (state, roles) => state.roles = roles // Сеттер ролей (метод записи каких-либо данных в state.roles)
},
actions: {
async fetchRoles({ commit }) {
try { // Пытаемся...
const { data } = await api.get('api/roles'); // Получить массив ролей с сервера
commit('setRoles', data); // И записать в state.roles
}
catch (error) { // Если возникла ошибка
throw error; // "Выкинуть" ее в вышестояший метод
}
},
}
});<template>
...
</template>
<script>
export default {
data: () => ({
...
}),
async created() { // При созлании страницы...
try {
await this.$store.dispatch('fetchRoles'); // Получить список ролей с сервера
// Теперь можно забирать роли из this.$store.state.roles
}
catch (error) { // Вот он - вышестоящий обработчик ошибок
alert(error.message);
}
}
}
</script>{
path: '/:catId',
name: 'CatProducts',
component: () => import('../components/pages/shop/categories/CatProducts'),
props: true
},<template>
<div>
<SearchProduct />
<ListProducts :catId = "catId" />
</div>
</template>
<script>
export default {
components: {
SearchProduct,
ListProducts
},
props: ['catId']
}
</script><component-a @event="alert('It's not working')"></component-a>
<component-b @event="alert('It's working')">
<component-c>
...
<button @click="submitMethod">Emit</button>
</component-c>
</component-b>
<script>
...
name: 'component-c',
methods: {
submitMethod() {
this.$emit('event');
}
}
</script>