"VueX do not mutate vuex store state outside mutation handlers" for dynamic properties. How to unbind?

Question

I am using Vue to build a kind of form builder with dynamic meta elements. See here:

<div v-for="item in getFieldType(selectedElement.type).meta"
     :key="item.id">
  <div class="form-group">
    <label>{{ item.label }}</label>
    <TextField
      :value="selectedElement.meta[item.id]"
      :label="item.label"
      :name="item.label"
      type="text"/>
  </div>
</div>

This is simply presented the definition of the field types + the loading of the fields from the API:

mounted()
  {
    this.file = await this.$store.dispatch('files/fetch', this.$route.params.id);
    // [...]
    this.selectedElement = this.file.fields[1].rawFields; // Simplified
  },

  data() {
    return {
      fieldTypes: [
        {
          type: 'singleline-text',
          label: 'Singleline Textfields',
          config: {
            minwidth: 50,
            name: true,
          },
          meta: [
            {
              type: 'text',
              label: 'Prefilled Value',
              hint: 'This value will be prefilled',
              id: 'prefilled'
            }
          ]
        }
      ]
    };
  }

So basically this is beeing used from VueX: this.file.fields[1].rawFields

Unforunately when I try to edit the TextField, I am getting following error:

[vuex] do not mutate vuex store state outside mutation handlers.

I researched and found this in docu: https://vuex.vuejs.org/guide/forms.html but it does not help as my approach is more dynamic. I have to find a way to "unbind" the rawFields from the vueX state as I wont need it there anymore later. I don't want to set strict to false. Is there any elegant way to solve this issue?

I also found this which describes how to handle it keeping it in Vue state: Vuex - Do not mutate vuex store state outside mutation handlers

But in my case it will make more sense to just unbind it instead of writing more getters, setters, blur/focus listeners etc.

Answer 1

You can do this without an external dependency:

const clone = JSON.parse(JSON.stringify(obj))