Почему проект крашится nuxt?

Question

[Zhalgas Saparov]

Проблема в том что, при перезагрузке страницы почему то nuxt выдает ошибку "Cannot read property 'phone' of undefined".

<template>
  <div class="container cabinet_main">
    <div class="main">
      <div class="title">Мои данные</div>
      <div class="save_button">
        <button @click="save()" :disabled="loading" style="display: flex; align-items: center">
          <b-spinner
            small
            style="margin-right: 0.5em; border-radius: 50% !important"
            v-if="loading"
            :disabled="loading"
          ></b-spinner>Сохранить
        </button>
      </div>
      <div class="cabinet_block">
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Фото пользователя</b-form-text>
          <div class="image-uploader">
            <span class="image-uploader-text">Нажмите сюда, чтобы добавить фото</span>
            <input type="file" />
            <img />
          </div>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Имя</b-form-text>
          <b-form-input class="cabinet_input" v-model="user.first_name"></b-form-input>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Фамилия</b-form-text>
          <b-form-input class="cabinet_input" v-model="user.last_name"></b-form-input>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Имя пользователя</b-form-text>
          <b-form-input class="cabinet_input" v-model="user.username"></b-form-input>
        </div>
        <div class="cabinet_group">
          <b-form-text
            style="font-size: 0.4em; color: #064482 !important"
          >Электронная почта (E-mail)</b-form-text>
          <b-form-input class="cabinet_input" type="email" v-model="user.email"></b-form-input>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Номер телефона</b-form-text>
          <b-form-input class="cabinet_input" type="tel">{{user.profile.phone}}</b-form-input>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Пароль</b-form-text>
          <b-form-input
            class="cabinet_input"
            type="password"
            placeholder="Изменить"
            ref="changePassword"
          ></b-form-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user2: [],

      loading: false,
      show: false
    };
  },

  computed: {
    user() {
      return this.$store.state.user;
    }
  },

  methods: {
    // async save() {
    //   this.loading = true;
    //   let form = new FormData();
    //   let payload = {
    //     id: this.user.id,
    //     first_name: this.user.names,
    //     last_name: this.user.names,
    //     username: this.user.username,
    //     email: this.user.email,
    //     photo: this.user.profile.photo
    //   };
    //   console.log(payload);
    //   //   if (typeof payload.photo == "string") delete payload.photo;
    //   //   for (let key in payload) {
    //   //     if (!payload[key]) {
    //   //       delete payload[key];
    //   //     } else {
    //   //       if (key != "id") form.append(key, payload[key]);
    //   //     }
    //   //   }
    //   //   try {
    //   //     await this.$store.dispatch("updateUser", { form, id: payload.id });
    //   //     this.$store.commit("setSuccess", {
    //   //       show: true,
    //   //       message: "Изменения прошли успешно"
    //   //     });
    //   //     this.loading = false;
    //   //   } catch (error) {
    //   //     console.log(error.response);
    //   //     this.loading = false;
    //   //   }
    // }
  }
};
</script>

Ошибка

Answer 1

[Александр Аксентьев]

В момент загрузки еще нет никакого стейта, а компонент уже пытается рендериться и выводить данные которых нет.

Надо проверять всё на наличие всех данных перед выводом и использованием.

Comments

[Zhalgas Saparov]

Тоже думал про это, а как можно решить проблему или в какую сторону копать?

[Александр Аксентьев]

Zhalgas Saparov,
if(user) user.somevar
if(user && user.somevar) user.somevar.var
...

[Zhalgas Saparov]

Александр Аксентьев, Можно слегка по подробнее, пожалуйста)

[Александр Аксентьев]

Zhalgas Saparov, ломается из-за этого {{user.profile.phone}}, в момент рендеринга компонента там нет никакого profile еще.
Поэтому нельзя получить phone из profile который null/undefined.

перед выводом надо проверить что оно там есть

v-if="user && user.profile"

И в целом в коде когда используется тоже самое, иначе там и будет выкидывать ошибку.

Answer 2

[Игорь]

Коллега, сделайте state по дефолту.

В моём случае, я делаю так.
Обратите внимание, я создал свойства по дефолту, но они пустые.
У вас больше не будет крошиться проект

import {ACTIVE_COUNTRY_ID, CITY, COUNTRIES, CATEGORIES, REGION, TITLE, COUNTRY} from "./mutation-types";


export const state = () => ({
  [TITLE]: "",
  [CITY]: {
    id: 0,
    name: ""
  },
  [REGION]: {
    id: 0,
    name: ""
  },
  [ACTIVE_COUNTRY_ID]: 0,
  [COUNTRY]: {
    id: 0,
    name: ""
  },
  [COUNTRIES]: [],
  [CATEGORIES]: [],
});

Comments

[Zhalgas Saparov]

Интересное решение, скоро начну проект сделаю как вы и предлагаете, но когда проект уже написан сложно какие-то изменения добавлять

[Игорь]

Zhalgas Saparov, Во тут как раз не сложно, как правило, state это всего один файл.
Я по началу тоже негодовал, когда в магазине нет нечего всё крошиться.

Если использовать дефолтное значение – то всё меняется.

И если вы заметили, в качестве имён, я использую константы.
Для чего?
Вот для этого

mutations.js

import {ACTIVE_COUNTRY_ID, CITY, COUNTRIES, CATEGORIES, REGION, TITLE, COUNTRY} from "./mutation-types";

export default {
  [TITLE](state, value) {
    state[TITLE] = value
  },

  [CITY](state, value) {
    state[CITY] = value
  },

  [REGION](state, value) {
    state[REGION] = value
  },

  [ACTIVE_COUNTRY_ID](state, value) {
    state[ACTIVE_COUNTRY_ID] = value
  },

  [COUNTRIES](state, value) {
    state[COUNTRIES] = value
  },

  [COUNTRY](state, value) {
    state[COUNTRY] = value
  },

  [ACTIVE_COUNTRY_ID](state, value) {
    state[ACTIVE_COUNTRY_ID] = value
  },

  [CATEGORIES](state, value) {
    state[CATEGORIES] = value
  },
};

getters.js

import {ACTIVE_COUNTRY_ID, CITY, COUNTRIES, CATEGORIES, REGION, TITLE, COUNTRY} from "./mutation-types";

export default {

  [REGION]: (state) => {
    return state[REGION]
  },

  [CITY]: (state) => {
    return state[CITY] || {id: 0, name: ""}
  },

  [ACTIVE_COUNTRY_ID]: (state) => {
    return state[ACTIVE_COUNTRY_ID]
  },

  [COUNTRIES]: (state) => {
    return state[COUNTRIES]
  },

  [COUNTRY]: (state) => {
    return state[COUNTRY]
  },

  [CATEGORIES]: (state) => {
    return state[CATEGORIES]
  },
};

actions.js

import {CITY, COUNTRIES, CATEGORIES, REGION, COUNTRY} from "./mutation-types";


export default {

  async nuxtServerInit({commit, dispatch}, {query}) {
    await dispatch(CITY, query.hasOwnProperty("city_id") ? query.city_id : 0)
  },


  /**
   * Getting one city
   * @param commit
   * @param city_id
   * @param id
   * @returns {Promise<void>}
   */
  async [CITY]({commit, state}, city_id) {
    if (city_id === 0) {
      commit(CITY, {
        id: 0,
        name: ""
      })
      return new Promise(function (resolve) {resolve()})
    } else {
      if (state.city.id !== city_id) {
        return this.$axios.$get(`${process.env.api}/database.getCityById`, {
          params: {
            city_id
          }
        }).then(({code, data}) => {
          if (code === 0) {
            commit(CITY, data)
          }
        });
      } else {
        return new Promise(function (resolve) {resolve()})
      }
    }
  },


  /**
   *
   * @param commit
   * @param state
   */
  [CATEGORIES]({commit, state},) {

    if (state[CATEGORIES].length === 0)
      this.$axios.$get(`${process.env.api}/categories.get`, {
        params: {
          lvl: 0,
          offset: 0,
          count: 1000
        }
      }).then(({code, count, items}) => {
        if (code === 0) {
          commit(CATEGORIES, items)
        }
      });
  },
}

state.js

import {ACTIVE_COUNTRY_ID, CITY, COUNTRIES, CATEGORIES, REGION, TITLE, COUNTRY} from "./mutation-types";


export const state = () => ({
  [TITLE]: "",
  [CITY]: {
    id: 0,
    name: ""
  },
  [REGION]: {
    id: 0,
    name: ""
  },
  [ACTIVE_COUNTRY_ID]: 0,
  [COUNTRY]: {
    id: 0,
    name: ""
  },
  [COUNTRIES]: [],
  [CATEGORIES]: [],
});

Поддерживать легче.

[Zhalgas Saparov]

Игорь, Сейчас попробую, у меня проект крашится во многих местах как раз по этой причине, что данных пока нет. Да и nuxt/ssh не знаю