解决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 相关文章推荐
从零学jquery之如何使用回调函数
May 16 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
本科毕业生自我鉴定
2013/11/02 职场文书
大学生旷课检讨书
2014/01/22 职场文书
yy司仪主持词
2014/03/22 职场文书
外国人聘用意向书
2014/04/01 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL