store getter returns observer object instead of null

Question

I would like to create a simple "Conway's Game of Life" application and store the settings that have already been made to the localStorage.

I created three views

• Map Settings | Define map size etc.

• Map Setup | Create a preset for your map

• Map Launch | Launch your preset

Whenever the settings change the preset has to be deleted because the preset might have a different old size. The settings use default values if the localStorage is empty.

Within my store I save the map setup to the grid property. So the value is either null or a two dimensional array from the localStorage.

When routing to the MapSetup.vue file I use the mounted event to setup the preset

  mounted: function() {
    if (this.grid) { // the preset from the store / localStorage
      this.currentGrid = this.grid; // use the preset
    } else {
      this.currentGrid = this.generateNewMap(); // generate a new preset
    }
  }

Unfortunately this.grid (store getter) is not null and returns an __ob__ observer item. Because of this the if statement is truthy and will not generate a new preset.

I created a working example of my application here

https://codesandbox.io/s/vuetify-vuex-and-vuerouter-h6yqu

You can define the settings in MapSettings.vue and the grid state from mapSetup should be set to null. After redirecting to MapSetup.vue no grid should appear because this.grid returns __ob__ observer instead of null.

How can I fix it?

Answer 1

[MutationTypes.RESET_MAP_SETUP]: state => {
    state.grid = [];
}

when you reset the grid, you set it as an empty array, not as null that is why it's not null in your mounted hook