How to properly structure your vuex store?

Question

Vue.js

There is storage on vuex. How do I get rid of this spaghetti?

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
            }
          ]
        }
      ]
    }
  },

If I just do data:null , and then I try to write the response from ajax there, in this case, when I want to get the value of the data.city.name field, the error "can't read property name of undefined" will be displayed
ajax request occurs during the hook created

Answer 1

You need to add another boolean field, for example isReady: false. In the action, when the date is stored in the store, set isReady: true, on the page itself, do computed:

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

In markup, do v-if, v-else. spin the spinner first, then show the date.

Answer 2

It is quite possible to assign nullto state.data, just then you need to check the presence of the fields you need in the state, for example:
or track the bug

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

There are, in fact, a lot of options. It all depends on the context of your task and the architecture of the application.