解决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实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue的路由映射问题及解决方案
Oct 14 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
js数组的操作指南
2014/12/28 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
windows下python安装小白入门教程
2018/09/18 Python
python实现字符串和字典的转换
2018/09/29 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python SVM 线性分类模型的实现
2019/07/19 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
高三语文复习计划
2015/01/19 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
会议室使用管理制度
2015/08/06 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js
Java设计模式中的命令模式
2022/04/28 Java/Android