解决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 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
前端微信支付js代码
Jul 25 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
JavaScript实现两个数组的交集
Mar 25 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面向对象程序设计之类常量用法实例
2014/08/20 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
js location.replace与location.reload的区别
2010/09/08 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
python解析xml文件操作实例
2014/10/05 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
flask框架中的cookie和session使用
2021/01/31 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
单位介绍信范文
2014/01/18 职场文书
秋季运动会广播稿
2014/02/22 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年团支书工作总结
2014/11/14 职场文书
经销商会议开幕词
2016/03/04 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS