vuex报错Computed property “xxx“ was assigned to but it has no setter.
当使用vuex存储数据时,常常有这样的需求:输入框显示并动态修改state中的数据。
我们第一个反应就是使用v-model直接绑定state中的数据,虽然确实可以显示和修改,但是控制台会报错,所以不能采取这种方式。
案例如下:
在使用vant组件库实现底部标签栏时,此标签栏在各个页面中都需要显示,故放在App.vue中。
<template><div id="app"><router-view></router-view><van-tabbar class="tab" v-model="activeTab" @change="changeActiveTab"><van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/cate">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/cart" :badge="badgeCount">购物车</van-tabbar-item><van-tabbar-item icon="user-circle-o" to="my">我的</van-tabbar-item></van-tabbar></div>
</template><script>
import { mapState, mapGetters, mapMutations } from 'vuex'export default {data () {return {}},computed: {...mapState('m_user', ['activeTab']),// ...},methods: {...mapMutations('m_user', ['updateActiveTab']),changeActiveTab (index) {this.updateActiveTab(index)}}
}
</script>
activeTab:绑定选中标签的索引值,通过修改 v-model 即可切换选中的标签。
由于多个页面都可以切换标签,把activeTab作为公共变量存储到vuex中。updateActiveTab公共方法用于修改activeTab的值。
上面的代码可以切换标签,但是会报错:Computed property "activeTab" was assigned to but it has no setter.
解决办法:通过计算属性getter获取vuex中的值,通过setter来修改值。
这里新增一个计算属性active作为绑定值,利用getter和setter 来调用和修改公共变量activeTab。
<template><div id="app"><router-view></router-view><van-tabbar class="tab" v-model="active"><van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/cate">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/cart" :badge="badgeCount">购物车</van-tabbar-item><van-tabbar-item icon="user-circle-o" to="my">我的</van-tabbar-item></van-tabbar></div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'export default {data () {return {}},computed: {...mapState('m_user', ['activeTab']),// ...active: {get () { return this.activeTab },set (val) { this.changeActiveTab(val) }}},methods: {...mapMutations('m_user', ['updateActiveTab']),changeActiveTab (index) {this.updateActiveTab(index)}}
}
</script>
vuex报错Computed property “xxx“ was assigned to but it has no setter.相关推荐
- 前端开发:Vue报错Computed property “show“ was assigned to but it has no setter的解决方法
前言 在前端开发中,使用Vue的时候关于组件使用是非常常见的操作,而且也会遇到各式各样的问题,尤其是刚接触前端开发的开发者.本篇博文分享一下在封装关于Vue的组件的时候,通过计算属性监听父子组件传值提 ...
- vue 的计算属性报错Computed property “disa“ was assigned to but it has no setter.
原因: vue的计算属性不能设置,只能读取 解决:
- [Vue] Computed property XXX was assigned to but it has no setter.
项目过程中经常遇到如下问题: [Vue warn]: Computed property "CurrentStep" was assigned to but it has no s ...
- Computed property XXX was assigned to but it has no setter
报错视图: 原因: 组件中v-model="XXX",而XXX是vuex state中的某个变量 vuex中是单项流,v-model是vue中的双向绑定,但是在computed中只 ...
- Computed property “XXX“ was assigned to but it has no setter
报错原因:vuex 1.组件中v-model="XXX",而XXX是vuex state中的某个变量 2.vuex中是单项流,v-model是vue中的双向绑定,在computed ...
- [Vue warn]: Computed property “userInfo“ was assigned to but it has no setter.
[Vue warn]: Computed property "userInfo" was assigned to but it has no setter. 一.报错信息 二.报错 ...
- Vue warn]: Computed property XXXl was assigned to but it has no setter.错误
Vue warn]: Computed property "XXXl" was assigned to but it has no setter.错误 解决:直接修改HTML中的v ...
- Computed property “value1“ was assigned to but it has no setter.
在写 Vue 项目时出现了以上报错信息,特此记录 computed: {value1() {return this.value}, } 意思是说:我在计算属性里修改 value1 这个属性时,没有使用 ...
- [Vue warn]: Computed property tabs was assigned to but it has no setter.
为什么80%的码农都做不了架构师?>>> 这种问题一般是tabs这个计算属性没有设置set方法导致该报错,因为在methods方法里面有对tabs赋值的操作.只要添加一个 se ...
最新文章
- 【转载】mysql常用函数汇总
- python3创建定时任务
- P1198 [JSOI2008]最大数
- 5选项卡(封装插件版)加事件委托版选项卡
- #if defined(__cplusplus)
- Mac OS使用技巧十七:丰富多彩的花哨输入法
- 5.jQueryAjax
- Taro+react开发(82):设置默认属性
- 实例:从一个文件中读取销售记录,并合并生成销售报告,实现销售册数,总销售额,平均售价...
- 第九章 利用化学知识制药
- qwidget show 是否有信号_PyQt5信号与槽机制入门(一)
- 语言栈十进制转十六进制_十进制数转二进制、八进制、十六进制等任意进制_C语言「抄作业」...
- LVS详解(二)——LVS工作模式
- 粒子群算法(1)----粒子群算法简单介绍
- Python pip freeze获取安装的Python包并使用pip install -r还原到这些包环境(转载)
- java 圆的类_java:设计实现圆形类、正方形类、长方形类
- 链表Linked List
- 浏览器内核以及渲染过程
- curl http或https上传下载
- WindowServer2012R2+Anoconda3.5.0.1+CUDA9.0+cuDNN7.1.3+Tensorflow-gpu1.6离线搭建深度学习开发环境