@Stijlbreuk, мы ❤️ VueJS. Мы быстро влюбились в него после тестирования и сравнения с обычными подозреваемыми, такими как Angular, React, Ember и некоторыми необычными подозреваемыми, такими как Mithril и очень красивой компактной Vue-подобной библиотекой: RivetsJS.
Для нас победителем вышел Vue. Это было просто хорошо. Кривая обучения не слишком крутая по сравнению с другими фреймворками. Эта ментальная модель имеет смысл только для наших дизайнеров и разработчиков. Также сообщество растет и имеет позитивную атмосферу.
Когда вы применяете библиотеку или фреймворк, такой как Vue, на практике, есть вероятность, что вы столкнетесь с некоторыми проблемами, проблемами или проблемами, из которых вы не сразу знаете, как их решить.
Конечно, вы можете прочитать Руководство по Vue, найти в Stack Overflow других людей, столкнувшихся с той же проблемой, или спросить (очень отзывчивых и дружелюбных) людей в чате Vue. Но чтобы сэкономить вам время, мы собрали некоторые из наших проблем и их решений, с которыми мы столкнулись при более глубоком изучении Vue и Vuex;
- Как преобразовать строку поля ввода в число?
- Почему мой массив не реагирует на обновление индекса?
- Как наблюдать за конкретным свойством объекта?
- Как следить за изменением ЛЮБОГО свойства объекта?
- Как отправить действие в другой модуль с пространством имен в Vuex?
- Как передать данные методу получения в модуле в Vuex?
Реактивность
1. Как преобразовать строку поля ввода в число?
Начнем с простого. Следующее поможет вам сэкономить время при преобразовании String в Number:
<template>
<input v-model.number="age" type="number">
</template>
<script>
export default {
data() {
return {
age: 0
}
}
};
</script>
СОВЕТ. Вы также можете использовать v-model.trim, чтобы обрезать пробелы во вводе.
2. Почему мой массив не реагирует на обновление индекса?
Вы можете подумать, что данные вашего массива не обновляются при непосредственной установке данных в индекс. Vue не обнаруживает, напрямую устанавливая значение индекса массива. Следующее НЕ обновляет ваши привязки:
this.artists[5] = 'Totally Enormous Extinct Dinosaurs';
Вы можете использовать Array.splice для решения этой проблемы:
this.artists.splice(5, 1, 'Totally Enormous Extinct Dinosaurs');
3. Как отслеживать конкретное свойство объекта?
Одна из замечательных особенностей Vue - это, конечно же, его реактивность. Когда вы изменяете свойство объекта данных, он волшебным образом обновляет свои привязки. Вы, наверное, знаете, что Vue позволяет вам наблюдать за свойством объекта данных следующим образом:
data() {
return {
track: 'Household goods'
}
},
watch: {
track(newValue, oldValue) {
// do something with newValue or oldValue
}
}
Однако вам может быть интересно наблюдать за определенным свойством в объекте. Вы можете сделать это, указав имя метода с ключевым путем как String внутри объекта наблюдения:
data() {
return {
house: {
livingroom: {
lights: 4
}
}
}
},
watch: {
'house.livingroom.lights' : function(newVal, oldVal) {
// triggered when lights is changed
}
}
4. Как следить за изменением ЛЮБОГО свойства объекта?
Также может быть, что вы хотите знать, когда какое-либо свойство изменяется в объекте. Это несколько сложнее, так как вы должны указать объект с методом и установить для свойства «deep» значение true. Это вызовет обработчик при изменении любого вложенного свойства в наблюдаемом объекте:
watch: {
house: {
handler(newVal, oldVal) {
// triggered when anything is changed within the Object
},
deep: true
}
}
Vuex
Когда ваше приложение немного масштабируется и использование шины событий больше не сокращает его, вы можете потратить некоторое время на изучение Vuex. Vuex управляет состоянием вашего приложения. Хотя поначалу это может показаться пугающим и несколько громоздким, на самом деле это не так уж плохо, и его правильное использование сделает ваше приложение более структурированным и, следовательно, менее загроможденным.
5. Как отправить действие в другой модуль с пространством имен в Vuex?
Иногда вы хотите вызвать действие из одного модуля с пространством имен в другом модуле с пространством имен:
dispatch('namespace/action', {
data: 'your payload',
}, { root: true });
Обратите внимание на параметры Object с root, установленным в true после полезной нагрузки.
6. Как передать данные методу получения в модуле Vuex?
Геттеры позволяют запрашивать данные из вашего магазина Vuex. Иногда вам нужны какие-то конкретные данные из магазина без изменения состояния. Есть умный способ использовать для этого метод получения, о котором упоминалось в этом выпуске GitHub.
getters: {
getMessageById: state => id =>
state.messages.find(message => message.id === id),
},
Синтаксис ES6 может быть коротким, но не всегда понятным, если вы с ним не знакомы. Итак, вот менее изящный синтаксис ES5, чтобы сделать его более подробным:
getters: {
getMessageById: function(state) {
return function(id) {
return state.messages.find(function(message) {
return message.id === id;
});
}
}
}
В JavaScript функции - это первоклассные граждане. Это дает возможность передавать их. Это также означает, что функция может возвращать другую функцию, как в данном случае. Когда вы вызываете getMessageById, параметр state является зависимостью, введенной Vuex. Это позволит вам получить доступ ... ну ... к вашему состоянию. Вы можете вернуть функцию из этой функции, которая позволит вам передать один (или несколько) аргументов из вашего компонента.
Вы можете вызвать геттер из вашего компонента следующим образом:
computed: {
…mapGetters('messageModuleNamespace', [
'getMessageById',
]),
},
methods: {
someMethod() {
const message = this.getMessageById(1);
}
}
Мы надеемся, что хотя бы одна из этих случайных проблем и их решения помогут вам в вашем пути к тому, чтобы стать мастером VueJS! Если у вас есть какие-либо вопросы или у вас были проблемы и решения, которые подошли бы к этому списку, не стесняйтесь оставлять комментарии.
