Completed Homework 6 JS

[AlexKuskov]

Repository: https://github.com/AlexKuskov/homework-6-js GitHub Pages: https://alexkuskov.github.io/homework-6-js/

[TArch64]

<template>
  <div id="app">
    <weather-widget />
  </div>
</template>

1. стилі на ід ми не вішаємо. Роби через клас. А крім стилів ця ід більше ні для чого не використовується
2. У тебе тут врапер з дівки зайвий. можна просто

   <template>
   <weather-widget id="app" />
   </template>

[TArch64]

Просто. В домі не важливо як ти напишеш. а тут простіше буде

 components: {  WeatherWidget }

[TArch64]

Коли люди пишуть на вью вони знають шо таке scoped. І взагалі то цей атрибут має бути у всіх стилях компонентів

[TArch64]

props: {
    msg: String
  },

Для чого тобі це?

[TArch64]

import Vue from 'vue';
import axios from 'axios';

І оце тобі для чого?

[TArch64]

data() {
    return {
      city: 'Cherkasy',
      countryCode: 'ua'
    };
  },

Якщо у data тобі не потрібен доступ до контексту, то краще отак

data: () => ({
      city: 'Cherkasy',
      countryCode: 'ua'
  }),

[TArch64]

id="city-to-search" Для чого тобі айдішка?

[TArch64]

В компоненти стор імпортити не потрібно

import { store } from '../store';

Просто

this.$store

[TArch64]

v-on:submit="getForecastData" Можна просто @submit.prevent="getForecastData" .prevent використовується замість того щоб кожен раз писати e.preventDefault();

[TArch64]

Замість конкатенації юзай параметри ?appId=${key}&q=${this.city},${this.countryCode};`

const params = { appId: key, q: `${this.city},${this.countryCode}  };
axios.get(url, { params });

[TArch64]

.then(function юзай стрілочні функціх для колбеків

[TArch64]

$store.state.cityName замість таких штук в домі юзай хелпер mapState (погугли що це таке)

[TArch64]

Юзай скоречення v-bind:key :key

[TArch64]

<div class="loader" v-if="$store.state.isLoading"></div>
    <div v-else>

[TArch64]

Якщо тобі потрібно згрупувати елементи для якогось v-if, v-for, v-slot etc юзай тег template замість реальних елементів

    <div class="loader" v-if="isLoading"></div>
    <template v-else>
      <div class="forecast-day block" v-for="day of days" :key="day">
        <h3>{{ getDate(day[0].dt) }}</h3>
        <ul class="hour-list">
          <li v-for="hour of day" v-bind:key="hour">
            <forecast-list-item :hourWeather="hour" />
          </li>
        </ul>
      </div>
    </div>

Думаю там не потрібен індекс в v-for і можна обійтись просто значеннями днів, годин. Вони і так унікальні, а вью робить атрибут key скоповим відносно кожного списку не забувай про семантику і те що для списків є ul,li

[TArch64]

Для чого ти імпортиш вью і аксіос у всі компоненти? І для чого скрізь пропс msg?

[TArch64]

var? використай щось краще

[TArch64]

У тебе в стилях скрізь прописано lang="scss", але сасу там немає. Для чого воно?

[TArch64]

ping-ping

[AlexKuskov]

Так-так, я бачу цю таску. Зараз уже доробляю її

[AlexKuskov]

Коли люди пишуть на вью вони знають шо таке scoped. І взагалі то цей атрибут має бути у всіх стилях компонентів

Я в App.vue не писав скоуп, тому що там був стиль для .block селектора, який використовувався в деяких компонентах, і я хотів помістити .block в одне місце щоб не повторяти його в кожному компоненті. Але якщо атрибут скоуп має бути у всіх стилях компонентів, то добре. Ось я виправив це https://github.com/AlexKuskov/homework-6-js/commit/7e5f24bfdbbaaed8fd08e48b87661ee71493791b

Просто. В домі не важливо як ти напишеш. а тут простіше буде components: { WeatherWidget }

Виправив А що це за магія, що я можу писати назву компонента в домі і через PascalCase і через kebab-case? Це типу в специфікації вью так задумано?

Для чого ти імпортиш вью і аксіос у всі компоненти? І для чого скрізь пропс msg?

Я не помітив цього при рефакторингу кода. В мене IDE не підсвічує не використовані імпорти. Буду шукати якийсь плагін, для вс код, щоб більше не допускати цієї помилки

[AlexKuskov]

У тебе в стилях скрізь прописано lang="scss", але сасу там немає. Для чого воно?

Я встановив його випадково при установці проекта і забув видалити. Уже підправив

[AlexKuskov]

Ну все. Я завершив роботу Ось мої виправлення: https://github.com/AlexKuskov/homework-6-js/commits/master

[TArch64]

<!-- Add "scoped" attribute to limit CSS to this component only -->

Ці коменти зайві. Всі і так знають для чого там атрибут scoped

[TArch64]

computed: mapState({
    cityName: state => state.cityName,
    isHintDisplayed: state => state.isHintDisplayed,
    isLoading: state => state.isLoading,
    days: state => state.days
  }),

Якщо назви співпадають і немає вкладених модулів, то можна просто

computed: mapState([
    'cityName',
    'isHintDisplayed',
    'isLoading',
    'days'
  }),

Ну і якщо юзаєш хелпери, повинось в інших компонентах виклики мутацій та екшинів у хелпери

methods: {
  ...mapActions({
    someActionAlias: ACTIONS.SOME_ACTION
  }),
  ...mapMutations({
    someMutationsAlias: MUTATIONS.SOME_MUTATION
  }),
  otherMethod() {
    this.someMutationAlias(someDataIfNeeded);
    this.someActionAlias(someDataIfNeeded);
  }
}

[TArch64]

А що це за магія, що я можу писати назву компонента в домі і через PascalCase і через kebab-case? Це типу в специфікації вью так задумано? Просто вью так вміє. В темплаті більш привичним зазвичай є кебаб кейс, а в джс паскаль кейс, от вони таке і зробили

[TArch64]

Але якщо атрибут скоуп має бути у всіх стилях компонентів, то добре. В рутовому можна ще залишити стилі без скопу, але тільки глобальні (можна писати декілька тегів style для одного компонента, якщо що). Або ти ще можеш зробити папку styles, куди покласти стилі і заімпортити їх в main.js і ці стилі також будуть глобальні. Так доволі часто роблять і це ок

[AlexKuskov]

Все, виправив. Перевір, будь ласка, коли буде вільний час https://github.com/AlexKuskov/homework-6-js/commits/master