В Vuex Существует функция помощника, которая много появляется.
computed() {
...mapGetters(['currentUser'])
}
Когда я впервые работал с этим, у меня были некоторые проблемы Вавила, препятствующие мне использовать синтаксис ES6 и в результате, я не мог использовать функцию как предназначенную. Использование обходного пути помог мне точно понять, что делал этот маленький фрагмент, поэтому я подумал, что напишу это.
Как оказывается, здесь есть пара вещей здесь. Один из них ?| MapGetters Делает в качестве функции, а другой - это то, как распространенный синтаксис преобразует результат. Давайте начнем с погружения в саму функцию.
Что такое mapgetters?
В нашем примере цель MapGetters это сопоставить результат Store.Getters.CurrentUser к вычисленному атрибуту текущий пользователь . Это позволяет нам получить доступ к результату нашей функции Getter, как так.
{{currentUser}}
Как оказывается, MapGetters может принять объект или массив. Так что этот фрагмент, который показан выше.
computed() {
...mapGetters(['currentUser'])
}
Также может быть это.
computed() {
...mapGetters({currentUser: 'currentUser'})
}
В первом случае назначение имени неявно, во втором это явное. Но это единственное различие.
Теперь, когда мы знаем, что делает функция, давайте сломаемся.
Я всегда в пользу нескольких разных способов понять концепции. Итак, я спросил моего сотрудника прочитать этот пост и его объяснение того, что MapGetters Дщадился так. «Идея состоит в том, чтобы взять набор переменных в объекте вашего магазина в контроллере просмотра, и сопоставьте их на функцию Getter верхнего уровня, вы можете позвонить по имени с двухстороннего привязки на странице HTML?»
MapGetters.
Допустим, мы вообще не можем использовать синтаксис функции или помощника. Для того, чтобы сделать то же самое, что нам нужно сделать?
Мы хотим вызвать нашу функцию Getter, вернуть результат и сделать этот результат доступным через некоторое название. Так что мы сделали это.
computed() {
currentUser() {
return this.$store.getters.currentUser;
}
}
Мы создаем функцию и возвращая результат нашей функции Getter внутри него. Результат можно получить доступ к этой функции, как в этом примере.
{{currentUser}}
Имейте в виду, что имя, которое мы используем, это имя вычисленной функции, а не имя метода Getter, который мы вызываем. Возьмите этот пример, где имена не одинаковы.
computed() {
otherName() {
return this.$store.getters.currentUser;
}
}
Чтобы получить доступ к результату, мы ссылаемся на Другое имя Отказ
{{otherName}}
Много этого связывания исходит от Vue. Вы можете прочитать больше здесь Отказ
Глубокий вырез
Если вы хотите действительно глубоко погружаться, вот исходный код для MapGetters Отказ
/**
* Reduce the code which written in Vue.js for getting the getters
* @param {String} [namespace] - Module's namespace
* @param {Object|Array} getters
* @return {Object}
*/
export const mapGetters = normalizeNamespace((namespace, getters) => {
const res = {}
normalizeMap(getters).forEach(({ key, val }) => {
// The namespace has been mutated by normalizeNamespace
val = namespace + val
res[key] = function mappedGetter() {
if (
namespace &&
!getModuleByNamespace(this.$store, 'mapGetters', namespace)
) {
return
}
if (
process.env.NODE_ENV !== 'production' &&
!(val in this.$store.getters)
) {
console.error(`[vuex] unknown getter: ${val}`)
return
}
return this.$store.getters[val]
}
// mark vuex getter for devtools
res[key].vuex = true
})
return res
})
Здесь здесь много, а некоторые из них предназначены для обработки разницы в объекте против ввода массива, но мясо его находится в mapapegetter функция. Он принимает обратный объект и использует данный ключ, присваивает результат связанной функции Getter для значения.
Несколько
Теперь, когда мы понимаем саму функцию, давайте обратим наше внимание на синтаксис распространения. Ключ к пониманию ... MapGetters Действительно приходит от признания того, что функция предназначена для обработки нескольких вызовов Getter одновременно. Час одного использования мы начали с еще работы, но давайте посмотрим на это.
computed() {
currentUser() {
return this.$store.getters.currentUser;
}
otherThing() {
return this.$store.getters.otherThing;
}
finalThing() {
return this.$store.getters.finalThing;
}
}
Мы принимаем результат наших функций Getter и присваивая их функциональным переменным, которые мы можем ссылаться внутри нашего компонента. Это то же самое, что мы сделали выше, просто для нескольких звонков Getter одновременно.
Это позволяет нам сделать все эти результаты.
{{currentUser}} {{otherThing}} {{finalThing}}
Теперь легче объяснить ... Перед MapGetters.
Распространение синтаксиса
Вы можете быть знакомы с Spread Spread Spread. Если вы хотите осветить, я написал сообщение об этом здесь.
5 использует для оператора распространения
Laurie · 10 ‘1919 · 3 мин прочитаны
Это мощный синтаксис синтаксиса, который может сделать ряд разных вещей. Но посмотрим, что это делает в нашем примере.
Мы видели это MapGetters предназначен для замены нескольких вызовов функций. Когда он разрешается, он возвращает объект, который состоит из пар клавишных значений. Каждый ключ представляет собой строковое имя, и каждое значение является результатом связанного вызова функции getter. Так что действительно, мы остались с чем-то вроде этого.
computed() {
...{'currentUser': currentUser, 'otherThing': otherThing, 'finalThing': finalThing}
}
Обратите внимание, что это не допустимый JavaScript! Это просто абстракция.
Как оказывается, это выглядит ужасно, как объект буквальный. И как, как раздвижная синтаксическая обработка объектных литералов? Это действует как Объект.assign () Отказ
Если вы неясно, что это значит, это действительно выполняет следующее. Синтаксис спреда выбирает каждую пару клавишного значения внутри объекта и вытаскивает его в виде автономного объекта. Таким образом, каждый ключ можно использовать для ссылки на значение, которое хранит результат, так же, как мы видели раньше.
{{currentUser}} {{otherThing}} {{finalThing}}
Все вместе сейчас
Давайте посмотрим на наш код с самого начала.
computed() {
...mapGetters(['currentUser', 'otherThing', 'finalThing'])
}
Можем ли мы увидеть, что происходит сейчас? Каждая строка в массиве обрабатывается MapGetters. . Он принимает метод Getter одноименного имени и вызывает его, то он присваивает результат в качестве значения, где ключ является исходной строкой.
MapGetters Возвращает объект с помощью серии пар клавишных пар на основе этой формулы. Затем распределяющий синтаксис выключает каждую из этих пар ключевых значений, чтобы быть автономным объектом, который может быть упомянугнут непосредственно внутри кода шаблона. И это все.
Вывод
Это было много! И вы никогда не можете использовать MapGetters. Но это круто, чтобы понять это, верно?
Оригинал: “https://dev.to/laurieontech/understanding-mapgetters-in-vuex-2lba”