解决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中String类的subString()方法和slice()方法
May 24 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 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访问数组最后一个元素的函数end()用法
2015/03/18 PHP
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python 的类、继承和多态详解
2017/07/16 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Python 实现进度条的六种方式
2021/01/06 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
《美丽的彩虹》教学反思
2014/02/25 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
python通过新建环境安装tfx的问题
2022/05/20 Python