无法在mapState中使用set

最新推荐文章于 2022-11-28 18:41:51 发布
最新推荐文章于 2022-11-28 18:41:51 发布
阅读量1.4k 收藏
点赞数
分类专栏： vue 前端 文章标签： vue vuex mapState computed
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41337100/article/details/106336769
版权
在购物车页面子组件中，通过全选按钮控制购物车商品的选择状态。利用Vuex进行状态管理时，遇到在mapState中使用set方法导致的错误。错误发生原因是将所有computed属性都包裹在mapState内。正确做法是仅对需要从Vuex state中映射的数据使用mapState，其他计算属性保持原有写法，从而解决了问题。
摘要由CSDN通过智能技术生成

使用背景：购物车页面的下边栏设置了一个全选按钮，点击可以选择购物车的全部商品，再次点击则会取消选择。因为下边栏是一个子组件，所以需要向父组件发送信息。
错误写法：因为即使被mapState包裹也不会影响computed的正常功能，所以我通常是全部包裹住的，但是此时出现错误Computed property "checked" was assigned to but it has no setter.

  computed: mapState({
   
    list:'cart_list', //商品详情信息
    checked: {
   
      get() {
最低0.47元/天 解锁文章
reisaru
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
40-vue-在根据每个组件中的数据写成vuex时，注意的小点(mapActions、mapGetters、mapState、dispatch()、高级计算属性中的set、get)
code^_^熊的博客
03-07 565
1.vuex是全局的，所有组件都可以和它通信。 2.getters对象中没有this，应该用getters来取代this 图片示例 3.高级计算属性(包含get、set)   组件中get方法对应vuex中的getters对象。   组件中set方法写成了vuex中的actions。 4.mapState、mapGetters   mapState：组件中获得state对象中的共享状态。   mapGetters：组件中获得vuex中的和共享状态有关的计算属性 (例如：假若数组是共享的状态，那数组的长度这
【Pinia】常见报错和使用方式
最新发布
yuanyuan1995的博客
08-17 230
但是在组件里面被引用的时候其实还没有加载。所以会报错，这种使用选项式api的方式，最好是使用mapActions。将vue从page移到components里面的时候报错。虽然在main.js里面已经。
vue老项目Vuex的mapGetters方法使用报错
浩星
01-19 1687
前言: 在调试一些比较早期的项目的时候发现，一些项目中不识别 ...mapGetters ，这样引入的时候直接报错。 报错信息： ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/components/header.vue Module build failed: SyntaxError: F:/web/tab...
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
haoduoyu2099的博客
11-28 5206
Vue3 组合式(setup)关于mapState和mapGetters直接使用会因为computed中没有this而报错，故而对其重新封装，给每个mapState和mapGetters返回的每个函数都绑定一个store对象
vuex里mapState,mapGetters使用详解
刻痕
01-14 4648
vuex里mapState,mapGetters使用详解
Vue中的$set的使用实例代码
10-17
在Vue.js中，`$set`是一个非常重要的方法，它主要...在实际开发中，当遇到需要添加或更新属性且希望视图能够响应变化时，应优先考虑使用`$set`。同时，理解其工作原理有助于更好地掌握Vue的响应式机制，提高代码质量。
vue中$set的使用(结合在实际应用中遇到的坑)
08-27
在本文中，我们将详细介绍 Vue 中 $set 的使用，结合实际应用中遇到的坑。 什么是 $set？ 在 Vue 中，$set 是一个全局 API，用于手动强制更新数据。它可以帮助我们解决数据不更新的问题，当我们使用 Vue 进行开发...
Go中如何使用set的方法示例
09-18
主要介绍了Go中如何使用set的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ES6中如何使用Set和WeakSet
09-02
在ES6中，`Set`和`WeakSet`是两种新的数据结构，它们与数组类似，但具有不同的特性。本文将详细介绍如何使用这两种数据结构。 首先，`Set`是一个存储唯一值的集合，这意味着它不会包含重复的元素。创建一个`Set`...
解决VUEX的mapState/...mapState等取值问题
10-15
主要介绍了解决VUEX的mapState/...mapState等取值问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈python中set使用
12-23
浅谈python中set使用 In [2]: a = set() # 常用操作1 In [3]: a Out[3]: set() In [4]: type(a) Out[4]: set In [5]: b = set([1, 3]) In [6]: b Out[6]: {1, 3} In [7]: type(b) Out[7]: set In [8]: b.update...
不用commit提交就能修改mapState的值【使用this.$set】
明日复明日的博客
05-11 1718
情景：商城的购物车界面，点击全选选中全部商品，再次点击全部取消。商城里的数据存储在vuex里面一个叫做list_cart的数组里，其中一个属性是ischecked来控制每个商品是否被选中。 而下面这个则是van-submit-bar里面嵌套了一个van-checkbox，通过v-model="checked"来控制。checked也是一个computed数据： 点击后父组件（购物车页面）传递改变的value值，同时向父组件发消息代表方便改变其他选项的值。 checked: { get()
Vue3实践和对vuex中mapState,mapGetters辅助函数封装
monoplasty的博客
02-11 2180
1. readonly API的使用 在我们传递给其他组件数据时，如果直接将响应式数据传递给子组件。子组件如果使用数据不规范，修改了父组件传进来的props值没有任何反馈。 // 父组件 // <ReadonlyChild :info="info" /> setup() { const info = reactive({ name: "哇哈哈", }); return { info, }; } // 子组件 setup(props) {
Vuex mapGetters,mapActions
weixin_33719619的博客
04-24 347
一、基本用法 1. 初始化并创建一个项目 ? 1 2 3 vue init webpack-simple vuex-demo cd vuex-demo npm install 2. 安装 vuex ? 1 npm install vuex -S 3. 在 src 目录下创建 store.js 文件，并在 main.js 文件中导入并配...
mapState和computed结合在Vue3版本中的setup使用
qq_41308489的博客
11-25 4587
简单的用法: 直接用computed (不推荐） import {computed} from "vue" import {mapState, useStore} from "vuex" export default { setup() { const store = useStore() const counter = computed(() => store.state.counter) return { counte
mapState和mapGetters使用方法
weixin_68196399的博客
04-25 378
1. 映射state中的计算属性 computed:{ //...是指遍历对象，把store中的school提出来展示到computed中 ...mapState：{{name:'name',school:'school'}}（对象写法） 简写 ...mapState:{['name','school']}（数组写法） 2. 映射Getters中的计算属性 //...是指遍历对象，把store中的school提出来展示到computed中 ...mapGetters：{{name:'na
vuex
sqrtsix的博客
10-26 506
Vuex中mapState的用法import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './action' import getters from './getters'Vue.use(Vuex)const state = { userInfo
uniapp 使用store中存储的值
05-27
在 Uniapp 中使用 Vuex 来管理全局状态，如果你需要在组件中使用 store 中存储的值，可以使用 `mapState` 函数来进行映射。 首先在你的组件中引入 `mapState` 函数： ```javascript import { mapState } from '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值