问题
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