Computed property “xxx” was assigned to but it has no setter

Time:2021-6-22

problem

V-model value problem

Vuex – Computed property “xxx” was assigned to but it has no setter

Error reporting

<template>
  <div v-model="checkStatus">
    123
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
  computed:{
    ...mapState({
      checkStatus:state => state.common.checkStatus
    })
  }
}
</script>

Solution

//In your Component

computed: {
  ...mapGetters({
          nameFromStore: 'name'
      }),
  name: {
     get(){
       return this.nameFromStore
     },
     set(newName){
       return newName
     } 
  }
}
//In your store

export const store = new Vuex.Store({
   state:{
     name : "Stackoverflow"
   },
   getters: {
     name: (state) => {
         return state.name;
     }
   }
}

My solution

Component page

<template>
  <div v-model="common.checkStatus">
    123
  </div>
</template>
<script>
import {mapState} from "vuex"
export default {
//The computed part of the component page
//computed
  computed: {
    ...mapState({
        common:state => state.common,
        checkStatus:state => state.common.checkStatus
    }),
  }
  //Component page watch section
  //Watch real time monitoring CheckStatus
  watch: {
    checkStatus(newVal){
      if(newVal){

      }else{

      }
    }
  }
}
</script>

Common.js under store

const state = {
  checkStatus:false
}
const getters = {}
const actions = {}
const mutations = {
  setCheckStatus(state,payload){
    state.checkStatus = payload
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

Other component pages monitor CheckStatus in real time

import {mapState} from "vuex"
export default {
  computed: {
    ...mapState({
        checkStatus:state => state.common.checkStatus
    }),
  },
  //Watch real time monitoring CheckStatus
  watch: {
    checkStatus(newVal){
      if(newVal){

      }else{

      }
    }
  }
}

Other component page update CheckStatus

import {mapState} from "vuex"
export default {
  methods:{
    clickOpen(){
      this.$store.commit("setCheckStatus",true)
    },
    clickClose(){
      this.$store.commit("setCheckStatus",false)
    }
  }
}

bug:Vuex – Computed property “name” was assigned to but it has no setter

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]