Vue computed 报错:Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决办法

这篇具有很好参考价值的文章主要介绍了Vue computed 报错:Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

错误描述

最近在封装Vue模块时,借助Vue的Computed属性监听传递的数据,但是开发调试过程中控制台取提示Computed property was assigned to but it has no setter 错误。控制台报错如下:

Vue computed 报错:Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决办法

 错误分析

根据控制台错误提示,组件中定义的computed属性缺少setter,使用过computed 都应该知道,该错误提示通常发生在组件内为computed属性赋值的时候,如果没有显示的声明setter,控制台则会打印如上错误。那么顺着这个方向,继续排查错误

以下是我的代码user.js

export default {
	// 开启命名空间
	namespaced: true,
	// state保存的数据
	state: () => ({
		// 存储的地址
		address: JSON.parse(uni.getStorageSync('address') || '{}')
	}),
	mutations: {
		//更新收货地址
		updateAddress(state, address) {
			state.address = address
			// 通过 this.commit() 方法,调用 m_user 模块下的 saveAddressToStorage 方法将 address 对象持久化存储到本地
			this.commit('m_user/saveAddressToStorage')
		},
		// 定义将 address 持久化存储到本地 mutations 方法
		saveAddressToStorage(state) {
			uni.setStorageSync('address', JSON.stringify(state.address))
		}
	},
	// 数据包装器
	getters: {
		// 拼接地址
		addstr(state) {
			if (!state.address.provinceName) {
				return ''
			} else {
				return state.address.provinceName + state.address.cityName + state.address.countyName + state.detailInfo
			}
		},
	},
}

发先我在user.js中对address进行了重新赋值

解决办法一

在要使用该模块数据的组件computed里添加此代码

	address: {
				get() {
					return this.address;
				},
				set() {}
			}

这种方法虽然解决了目前的问题,但是会出现一个新问题,如下

Vue computed 报错:Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决办法

 目前不知道解决办法,有知道的小伙伴可以给我留言

解决办法二

将组件计算属性里的代码注释掉(下下策)文章来源地址https://www.toymoban.com/news/detail-413000.html

		computed: {
			// ...mapState('m_user', ['address']),
			...mapGetters('m_user', ['addstr']),
		}

到了这里,关于Vue computed 报错:Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • CptS260: Introduction to Computer Architecture Assignment 7Processing

    Java Python CptS260: Introduction to Computer Architecture School of Electrical and Computer Engineering Assignment 7: Pipelined MIPS Execution on Pipelined a CPU (5%) Assignment Description In class we have gone over examples of how a pipelined MIPS CPU will execute instrucitons. We will assume there is not a delay slot for a branch instruciton. For this as

    2024年04月16日
    浏览(10)
  • 【Vue3】computed 计算属性

    computed 是计算属性,它会根据响应式数据的变化⾃动计算出新的值,并缓存结果,只有在计算属性所依赖的响应式数据发⽣改变时才会重新计算。 computed 适⽤于需要根据响应式数据计算得出结果的场景,例如根据商品的数量和单价计算商品的总价,或者根据选中的过滤条件过

    2024年02月15日
    浏览(8)
  • 学习Vue:computed VS watch

    在 Vue.js 中,Vue 实例与数据绑定不仅限于简单的插值表达式和指令。在实际开发中,您可能会遇到更复杂的数据处理需求。为此,Vue 提供了计算属性和侦听器这两个强大的工具,让您能够更灵活地处理和响应数据变化。 计算属性是 Vue 实例中的一个特殊属性,它允许您定义一

    2024年02月12日
    浏览(10)
  • Vue 中的 computed 和 watch 的区别

    在Vue.js中, computed 和 watch 是两个常用的属性,用于处理数据的监听和响应。它们在功能上有一些相似之处,但也有一些重要的区别。本文将介绍 computed 和 watch 的区别,并提供相关的代码示例。 Vue 中的 computed 和 watch 都是用来观察数据变化的,但它们的用途和特点略有不同

    2024年02月07日
    浏览(12)
  • Vue3的computed和watch

    Vue3的computed和watch

    目录 1、computed 2、computed完整写法  3、watch 4、watch监听对象具体属性 5、watch 监听reactive数据 1、computed 基于现有的数据计算出新的数据 2、computed完整写法   3、watch 1 . 侦听一个数据 第一个参数:监听的数据 第二个回调函数 2.侦听多个数据 第一个参数监听的数据构成的数组

    2024年01月24日
    浏览(13)
  • vue3中computed的使用详解

    根据以上代码说明,在vue3中,         computed的get 方法触发条件为:                 当computedValue依赖的值改变时,就会触发get方法,         computed的set 方法触发条件为:                 当改变整个computedValue对象时,才会触发set方法,改变computed

    2024年02月11日
    浏览(10)
  • Vue-计算属性(computed)简单说明和使用

    Vue-计算属性(computed)简单说明和使用

    学习vue的计算属性之前,我们先写一个案例,我们先用插值语法实现,然后再使用vue的计算属性实现,经过对比,我们就能掌握计算属性的精髓和原理 写一个简单的例子,姓和名分别用两个输入框控制,最后通过一个span标签拼接成一个全名 首先通过简单的插值语法实现,需

    2024年01月16日
    浏览(7)
  • 浅谈Vue的属性,computed和watch

    是什么? 直接上demo,了解一下语法先~ conputed是 计算 属性,watch是 监听 属性,本质上都是同一个 watcher实例 ,它们都是 通过响应式系统与数据,页面建立通信 。 computed带有 \\\"懒计算\\\" 功能 监听的逻辑有差异 :computed是依赖的值变了,它去重新求值,watch是目标值变了,它去

    2024年01月18日
    浏览(15)
  • Vue3/ Vue3 计算属性computed函数 语法 与 介绍 、Vue3 Vue2computed计算属性 能不能传参 怎么传参

    语法: // 第一种语法get方法 (没有set) const 函数名 = computed(() = {   return  }) // 第二种语法 get set 方法 带有set参数 可以设置 const 函数名 = computed(() = { get() { return 结果 }, set( val ){  } }) 触发场景:  如果要访问计算属性 会自动执行 get 如果要修改计算属性 会自动执行 set 简介

    2024年02月02日
    浏览(15)
  • vue3-computed计算属性!!!

    vue3-computed计算属性!!!

    1.计算属性具有缓存特性,在computed中的响应式数据不发生变化时,就不重新加载computed中的逻辑。(作用于大量耗时的逻辑解构,并为其数据不经常发生变化,可采取computed计算属性提高程序效率--常用于购物车数据计算) 代码如下:  通过F12检测数据变化:

    2024年02月05日
    浏览(10)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包