时间:2021-05-18
1. 实践环境
Vue 2.9.6
2. 问题描述
<script>import { mapState } from 'vuex';export default { name: "displayCount", computed: { ...mapState({ ...略 count: state => state.a.count }) }, methods: { increaseCount () { this.count = this.count + 1 } }};</script><style></style>如上,我们希望在执行increaseCount函数时,给mapstate函数中映射定义的this.count赋值,给该值增加1,结果,提示
[Vue warn]: Computed property "count" was assigned to but it has no setter.
3. 解决方案1
如下,把属性“移出mapState”,然后为属性新增get,set方法,分别用于获取值和改变值(按store状态管理规定的方式)
<script>import { mapState } from 'vuex';export default { name: "displayCount", computed: { ...mapState({...略 }), count: { get() { return this.$store.state.a.count; }, set(val) { this.$store.commit("increaseCount", val); } } }, methods: { increaseCount () { this.count = this.count + 1 } }};</script>注意:this.$store.commit("increaseCount", val);中的increaseCount方法名称,并不是methods中定义的方法名称,而是store中定义的方法
4. 解决方案2
通过对比当前属性值和store状态值,然后根据比较结果,决定是否根据store状态管理规则更新状态值。
<script>import { mapState } from 'vuex';export default { name: "displayCount", computed: { ...mapState({ count: state => state.a.count }) }, methods: { increaseCount () { if (this.count == this.$store.state.a.count) { this.$store.commit("increaseCount", this.count+1); } } }};</script>总结
到此这篇关于解决Vue 给mapState中定义的属性赋值报错的问题的文章就介绍到这了,更多相关vue给mapState属性赋值内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了Vue的MVVM实现方法,分享给大家,具体如下:1.Object.defineProperty()定义属性用意:给一个对象定义属性,那个属性原来是不存
本文介绍了关于vue-resource报错450的解决方案,分享给大家,具体如下:一、基本使用:1.页面引入importvueResourcefrom'vue-
1.静态传值(在父组件中赋值好props中属性的值传递给子组件)父组件importchildfrom'./components/child.vue'export
一、在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;向响应式对象中添加一个属性,并
本文实例为大家分享了C#实现简单的窗口抖动的具体代码,供大家参考,具体内容如下属性赋值:1、查看属性的类型,如果是C#中预定义的15种属性类型,直接赋值(1)查