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>
总结
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“解决Vue 给mapState中定义的属性赋值报错的问题”评论...
更新动态
2024年04月29日
2024年04月29日
- 4.6版本隐藏锚点位置一览,隐藏锚点在哪
- 群星.2024-追风者电视剧影视原声带【SONY】【FLAC分轨】
- 曾庆瑜.1992-18首中英文经典全集【派森】【WAV+CUE】
- 群星.1991-华纳浪漫心曲精丫华纳】【WAV+CUE】
- 幕府将军 Shogun
- 纳克鲁斯 Knuckles
- 特污兔《填空题》[FLAC/分轨][239.68MB]
- 陈奕迅《黑白灰》台湾版[WAV+CUE][400M]
- 群星《三大发烧女声》3CD[WAV+CUE][2G]
- 英雄传说闪之轨迹北方战役国际版 5月29日全球同步上市
- 仙剑世界风启测试定档5月31日 感受属于东方的浪漫幻想世界
- 元气骑士前传星界法师怎么玩 操控黑暗禁忌
- 物华弥新迷踪盘第二关怎么过 迷踪盘第二关通关方法
- 物华弥新迷踪盘第三关怎么过 迷踪盘第三关通关方法
- 物华弥新迷踪盘第四关怎么过 迷踪盘第四关通关方法