Что такое помощник mapGetter?
В Vue.js, когда вы работаете с управлением состоянием через Vuex, удобно использовать помощники, такие как mapGetters.
Это позволяет вам легко и эффективно получать доступ к состоянию хранилища в ваших компонентах.
Что такое mapGetters?
mapGetters — это функция из Vuex, которая помогает вам автоматически связывать геттеры из вашего хранилища с
вычисляемыми свойствами вашего компонента. Это сокращает код, упрощает его понимание и делает ваш компонент более
чистым.
Пример использования
Предположим, у вас есть Vuex хранилище, в котором есть геттер, возвращающий список задач:
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
tasks: [
{id: 1, title: 'Задача 1', completed: false},
{id: 2, title: 'Задача 2', completed: true},
],
},
getters: {
completedTasks(state) {
return state.tasks.filter(task => task.completed);
},
allTasks(state) {
return state.tasks;
},
},
});
Теперь, если вы хотите получить доступ к этим геттерам в вашем компоненте, вы можете использовать mapGetters.
Использование mapGetters в компоненте
<template>
<div>
<h1>Все задачи</h1>
<ul>
<li v-for="task in allTasks"
:key="task.id">
{{task.title}} - {{task.completed ? 'Выполнена' : 'Не выполнена'}}
</li>
</ul>
<h2>Выполненные задачи</h2>
<ul>
<li v-for="task in completedTasks"
:key="task.id">
{{task.title}}
</li>
</ul>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
computed: {
...mapGetters(['allTasks', 'completedTasks']),
},
};
</script>
<style scoped>
/* Ваши стили */
</style>
Как это работает?
mapGetters: В компоненте мы импортируем mapGetters из vuex.computed мы используем mapGetters и передаем туда массив с названиями
геттеров, которые хотим использовать (allTasks и completedTasks).allTasks и completedTasks прямо в нашем шаблоне, чтобы
отображать задачи.Заключение
Использование mapGetters в Vuex позволяет вам писать более понятный и поддерживаемый код. Это особенно полезно в
больших приложениях, где управление состоянием может стать сложным. Надеюсь, это поможет вам лучше понять, как работать
с состоянием приложения в Vue.js!