解决Vue 给mapState中定义的属性赋值报错的问题


Posted in Javascript onJune 22, 2020

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属性赋值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JS hashMap实例详解
May 26 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
浅析vue数据绑定
Jan 17 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
关于JSON解析的实现过程解析
Oct 08 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
支付宝小程序实现省市区三级联动
Jun 21 #Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 #Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 #Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 #Javascript
jQuery 移除事件的方法
Jun 20 #jQuery
vue引入静态js文件的方法
Jun 20 #Javascript
详解Vue之计算属性
Jun 20 #Javascript
You might like
聊天室php&amp;mysql(五)
2006/10/09 PHP
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
PHP编程风格规范分享
2014/01/15 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python 功能和特点(新手必学)
2015/12/30 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
STP的判定过程
2012/10/01 面试题
简历中的自我评价范文
2014/02/05 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
给市场的环保建议书
2014/05/14 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
初三毕业感言
2015/07/31 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书