[Vuejs]-Do not mutate Vuex store state outside mutation handlers (ERROR)

by

1👍

✅

I would do something like this:

Codesandbox: https://codesandbox.io/s/vuex-store-ibjbr

<template>
  <div>
    <div v-for="(value, key) in basicInformation" :key="key">
      <el-col :span="12">
        <el-form-item :label="keyToLabel(key)">
          <el-input :value="value" @input="onInput({ key, value: $event })" />
        </el-form-item>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    ...mapState(['teststore']),
    basicInformation() {
      return this.teststore.personData.basicInformation
    },
  },
  methods: {
    onInput({ key, value }) {
      this.$store.commit('updateBasic', { key, value })
    },
    keyToLabel(key) {
      // This is only an example
      const keyToLabel = {
        firstName: 'First Name',
        // And so on...
      }
      return keyToLabel[key]
    },
  },
}

// And in your store, something like this
const store = {
  // ...
  mutations: {
    updateBasic(state, { key, value }) {
      state.teststore.basicInformation[key] = value
    },
  },
}
</script>
👤Phil

0👍

You can create a copy of basicInformation to have this inside component scope.

So associate a computed property to basicInformation and use it in v-models should kill this warning.

<template>
   <div v-for="item in localBasicInformation" :key="item.id">
     <el-col :span="12">
          <el-form-item label="First Name">
              <el-input v-model="item.firstName" />
          </el-form-item>
     </el-col>
   </div>
</template>

<script>
computed: {
  localBasicInformation() {
    return [...this.basicInformation];
  },
},
</script>

Just pay attemption about the differences between shallow and deep copy. If this.localBasicInformation is deep, spread operator will not work and you will need something like cloneDeep from lodash.

👤Matheus Valenza

Leave a comment