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