Как правильно структурировать свое хранилище vuex?

Question

[Luke LikeSkywalker]

Есть хранилище на vuex. Как мне избавиться от этого спагетти?

state: {
    data: {
      city: {
        name: null
      },
      list: [
        {
          deg: null,
          dt: null,
          humidity: null,
          pressure: null,
          speed: null,
          temp: {
            day: null,
            eve: null,
            max: null,
            min: null
          },
          weather: [
            {
              description: null,
              icon: null
            }
          ]
        },
        {
          deg: null,
          dt: null,
          humidity: null,
          pressure: null,
          speed: null,
          temp: {
            day: null,
            eve: null,
            max: null,
            min: null
          },
          weather: [
            {
              description: null,
              icon: null
            }
          ]
        },
        {
          deg: null,
          dt: null,
          humidity: null,
          pressure: null,
          speed: null,
          temp: {
            day: null,
            eve: null,
            max: null,
            min: null
          },
          weather: [
            {
              description: null,
              icon: null
            }
          ]
        },
        {
          deg: null,
          dt: null,
          humidity: null,
          pressure: null,
          speed: null,
          temp: {
            day: null,
            eve: null,
            max: null,
            min: null
          },
          weather: [
            {
              description: null,
              icon: null
            }
          ]
        },
        {
          deg: null,
          dt: null,
          humidity: null,
          pressure: null,
          speed: null,
          temp: {
            day: null,
            eve: null,
            max: null,
            min: null
          },
          weather: [
            {
              description: null,
              icon: null
            }
          ]
        }
      ]
    }
  },

Если я сделаю просто data:null, a потом постараюсь туда записать response от ajax, в этом случае когда я захочу получить значение поля data.city.name то выведется ошибка "can't read property name of undefined"
ajax запрос происходит во время хука created

Comments

[Koteezy]

Оставьте:

city: {
        name: null
      },
      list: []
}

Должно работать.

[Luke LikeSkywalker]

Koteezy, я это к примеру. На самом деле мне нужно каждое поле этой структуры

Answer 1

[lavezzi1]

Нужно добавить еще поле boolean, например isReady: false. В экшене когда дату сохранили в стор ставите isReady: true, на самой странице делаете computed:

{ isDataReady() { return this.$store.state.isReady ;}

В размете делаете v-if, v-else. сначала спиннер крутите потом дату показываете.

Comments

[Luke LikeSkywalker]

спасибо. попробую

Answer 2

[Klein Maximus]

Вполне можно присвоить null в state.data, просто потом нужно проверять наличие нужных Вам полей в state, например:

$store.state.data && $store.state.data.city ? $store.state.data.city.name : null

или отслеживать ошибку

let cityName;
try {
  cityName = this.$store.state.data.city.name;
} catch (e) {
  cityName = null;
}

Вариантов, на самом деле, масса. Все зависит от контекста Вашей задачи и архитектуры приложения.