問題
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