解决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 相关文章推荐
sails框架的学习指南
Dec 22 Javascript
浅谈document.write()输出样式
May 07 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
支付宝小程序实现省市区三级联动
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 shell命令合并图片的代码
2011/06/23 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP7 弃用功能
2021/03/09 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
Python递归函数定义与用法示例
2017/06/02 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python中scikit-learn机器代码实例
2018/08/05 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
竞选部门副经理的自荐书范文
2014/02/11 职场文书
世博会口号
2014/06/20 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
小鞋子观后感
2015/06/05 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
MySQL数据库 任意ip连接方法
2022/05/20 MySQL