关于javascript:Computed-property-xxx-was-assigned-to-but-it-has-no-setter

问题

v-model 取值问题

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

报错情景

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

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

解决方案

//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;}
   }
}

我的解决方案

component 页面

<template>
  <div v-model="common.checkStatus">
    123
  </div>
</template>
<script>
import {mapState} from "vuex"
export default {
//component 页面 computed 局部
//computed
  computed: {
    ...mapState({
        common:state => state.common,
        checkStatus:state => state.common.checkStatus
    }),
  }
  //component 页面 watch 局部
  //watch 实时监听 checkStatus
  watch: {checkStatus(newVal){if(newVal){}else{}
    }
  }
}
</script>

store 下的 common.js

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

export default {
  state,
  getters,
  actions,
  mutations
}

其余 component 页面 实时监听 checkStatus

import {mapState} from "vuex"
export default {
  computed: {
    ...mapState({checkStatus:state => state.common.checkStatus}),
  },
  //watch 实时监听 checkStatus
  watch: {checkStatus(newVal){if(newVal){}else{}
    }
  }
}

其余 component 页面 更新 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