Why nuxt returning a mutate vuex store error

Question

I am using Nuxt

I have a simple 'Drawer.vue' component.

After my user execute a login, I try show the page with the drawer.

If the login was successful, the 'auth' midleware receive the 'menu items' to drawer by '/me" backend endpoint.

My problem is that I am getting the next error. I have seen this question Vuex - Do not mutate vuex store state outside mutation handlers, but AFAIK I am not changing vuex store state outside mutation handlers.

//Error:

Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:135)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:893)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at Watcher.run (vue.runtime.esm.js?2b0e:4584)
    at Watcher.update (vue.runtime.esm.js?2b0e:4558)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Object.reactiveSetter [as items] (vue.runtime.esm.js?2b0e:1055)
    at eval (Drawer.vue?c84c:43)
    at Array.filter (<anonymous>)
    at VueComponent.flatFilter (Drawer.vue?c84c:40)

// Drawer.vue

<template>
  <div>
    {{ computedItems }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'DashboardCoreDrawer',

  data: () => ({
    menuFiltered: [],
    defaultMenu: [
      {
        icon: 'mdi-view-dashboard',
        title: 'Dashboard',
        to: '/',
        visible: 1,
      },
    ],
  }),

  computed: {
    ...mapGetters(['menuUser']),

    computedItems() {
      return this.menuFiltered
    },
  },

  watch: {
    menuUser(newValue) {
      this.menuFiltered = this.filterItems(newValue)
    },
  },

  methods: {
    flatFilter(nestedProp, compareKey, compareId, arr) {
      return arr.filter((o) => {
        const keep = o[compareKey] !== compareId
        if (keep && o[nestedProp]) {
          o[nestedProp] = this.flatFilter(
            nestedProp,
            compareKey,
            compareId,
            o[nestedProp]
          )
        }
        return keep
      })
    },
    filterItems(arr) {
      const items = [...arr]
      const res = this.flatFilter('items', 'visible', 0, items)
      return res
    },
  },
}
</script>

// index.js, in Nuxt store folder:

export const getters = {
  menuUser(state) {
    return state.auth.user?.menu || []
  },
}

Does this answer your question? [Vuex - Do not mutate vuex store state outside mutation handlers](https://stackoverflow.com/questions/46044276/vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers) — kissu, Sep 24 '21 at 21:18

tony19 · Accepted Answer · 2021-09-25T21:27:58.710

The warning is caused by flatFilter(), which mutates the input arr inside the arr.filter() callback, adding/updating a property:

flatFilter(nestedProp, compareKey, compareId, arr) {
  return arr.filter((o) => {
    const keep = o[compareKey] !== compareId
    if (keep && o[nestedProp]) {
      o[nestedProp] = this.flatFilter(/*...*/)
      ^^^^^^^^^^^^^^^
    }
    return keep
  })
},

filterItems() attempts to clone the original menuUser[] from Vuex with:

filterItems(arr) {
  const items = [...arr] // ❌ shallow copy
  //...
}

...but the spread operator only creates a shallow copy, so the new array items still refer to the original items in menuUser[], leading to the mutation warning in flatFilter().

Solution

A quick fix is to deep copy the original array in filterItems, using JSON.parse() and JSON.stringify():

filterItems(arr) {
  const items = JSON.parse(JSON.stringify(arr)) // ✅ deep copy
  //...
}

demo 1

Alternatively, flatFilter() could be refactored to avoid the mutation (thus obviating the deep copy of the array in filterItems()). flatFilter() should do:

Filter the array by the comparison key. If the value of the object's comparison key does not match the given value, allow it to pass the filter.
Map the resulting array to a new array. If the specified nested property exists, return a copy of the object that has the nested property updated recursively with the same filter (go to step 1).
Otherwise, return the original object (no change needed).

flatFilter(nestedProp, compareKey, compareId, arr) {
  return arr
    // 1️⃣
    .filter((o) => o[compareKey] !== compareId)

    .map((o) => {

      // 2️⃣
      if (o[nestedProp]) {
        return {
          ...o,
          [nestedProp]: this.flatFilter(nestedProp, compareKey, compareId, o[nestedProp]),
        }

      // 3️⃣
      } else {
        return o
      }
    })
},

Now filterItems() can pass the original input array to flatFilter() without a deep copy:

filterItems(items) {
  return this.flatFilter('items', 'visible', 0, items)
},

And the menuUser-watcher and menuFiltered[] data property could be replaced with this computed property:

computedItems() {
  return this.filterItems(this.menuUser)
},

demo 2

Why nuxt returning a mutate vuex store error

1 Answers1

Solution