共计 1518 个字符,预计需要花费 4 分钟才能阅读完成。
问题
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
正文完
发表至: javascript
2020-09-15