问题

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 Componentcomputed: {  ...mapGetters({          nameFromStore: 'name'      }),  name: {     get(){       return this.nameFromStore     },     set(newName){       return newName     }   }}//In your storeexport 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