Fix – Vuex computed property was assigned to but it has no setter

If you are Getting Vuex computed property was assigned to but it has no setter error. This article will help you fix the issue.

The error happens because of the v-model. It’s trying to change the value of isLoading but mapState will only create getters.

Consider the example below:

For your component file:

<template>
  <div id="app">
    <router-view></router-view>
    <loading v-model="isLoading"></loading>
  </div>
</template>

<script>
  import { Loading } from 'vux'
  import { mapState } from 'vuex'

  export default {
    name: 'app',
    components: {
      Loading
    },
    computed: {
      ...mapState({
        isLoading: state => state.isLoading
      })
      }
    }
  }
</script>

Your store file should be like below:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  isLoading: false
}

const mutations = {
  updateLoadingStatus (state, payload) {
    state.isLoading = payload.isLoading
  }
}

export default new Vuex.Store({
  state,
  mutations
})

You can make things work by binding the value to the isLoading and then handle the update by committing the mutations on the @input

Consider the example below:

<template>
  <div id="app">
    <router-view></router-view>
    <loading :value.sync="isLoading"></loading>
  </div>
</template>

<script>
  import { Loading } from 'vux'
  import { mapState } from 'vuex'

  export default {
    name: 'app',
    components: {
      Loading
    },
    computed: {
      ...mapState({
        isLoading: state => state.isLoading
      })
    }
  }
</script>