bug:Vuex - Computed property “name” was assigned to but it has no setter
阿新 • • 發佈:2020-09-15
問題
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