Computed property “xxx” was assigned to but it has no setter

问题

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

原文链接:segmentfault.com

上一篇:Vue EventBus传值踩坑之Vuex完美解决
下一篇:Vue2源码解读(四)-Observe

相关推荐

  • 记一次 Vue Tabs 组件设计及计算属性 computed 动态引入组件

    本文涉及技术点: 动态组件 &amp; 异步组件 内置组件 keep-alive &amp; transition 插槽 slot 及 v-slot 实际场景 多级 tabs 切换,tab 项不固...

    6 个月前
  • 计算属性(computed)、方法(methods)和侦听属性(watch)的区别与使用场景

    参考资料:Vue.js 官网 1 计算属性与方法 下面两个代码示例分别用计算属性和方法实现同一个功能: &lt;!-- 计算属示例 --&gt; &lt;p&gt;Computed reversed...

    2 年前
  • 解析Vue.js中的computed工作原理

    我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。

    2 年前
  • 深度解析:Vue3如何巧妙的实现强大的computed

    前言 Vue中的computed是一个非常强大的功能,在computed函数中访问到的值改变了后,computed的值也会自动改变。 Vue2中的实现是利用了Watcher的嵌套收集,渲染watche...

    8 个月前
  • 深入理解computed 、watch 、 methods的使用场景及其区别

    computed、watch、methods是我们在Vue项目中经常使用的三个属性,今天我就来好好捋一捋他们其中的关系。 使用场景 computed 当依赖某些状态(data中的数据)发...

    5 个月前
  • 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V...

    2 年前
  • 浅谈Vue 中的 computed 和 methods 的使用

    computed:在computed中的函数,是在dom加载后马上执行的 methods:在methods中的函数,必须要有一定的触发条件,才会执行 Vue.js 将绑定表达式限制为一个表达式,如果想...

    1 年前
  • 浅析Vue中computed与method的区别

    其实官方文档对这个已经说的很清楚了,笔者不过是在其基础上进行归纳总结,各位看官还是先去读一下官方文档吧 1.computed区别于method的两个核心 在官方文档中,强调了computed区别于...

    2 年前
  • 手摸手带你理解Vue的Computed原理

    前言 computed 在 Vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利。那么本文就来带大家全面理解 computed 的内部原理以及工作流程。

    3 个月前
  • 我是怎么学会vue的09:计算属性(computed属性)

    data中的数据,可以通过插值语法直接显示到页面上,但有时需要先处理一下(比如把多个数据合并),再显示到页面。 此时就会用到计算属性(vue实例的computed属性)。

    6 个月前

官方社区

扫码加入 JavaScript 社区