购物车功能，vuex，怎么点击加入购物车，没有反应呢（已解决，给购物车添加一本新的书）

原创 已于 2022-03-09 10:12:43 修改 · 470 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
722 篇文章 4 人学习
订阅专栏 查看详情
JavaScript

当前文章被收录于：

JavaScript
628 篇文章 6 人学习
订阅专栏 查看详情
于 2022-03-09 09:59:21 首次发布
本文记录了在Vue.js应用中使用Vuex实现购物车功能时遇到的问题，即点击添加商品到购物车无响应。经过排查，发现是methods拼写错误导致，修正后功能正常运行。 
<template>
  <div>
      <table>
          <tr>
              <td>商品编号</td>
              <td><input type="text" v-model.number="id"></td>
          </tr>
          <tr>
              <td>商品名称</td>
              <td><input type="text" v-model="title"></td>
          </tr>
          <tr>
              <td>商品价格</td>
              <td><input type="text" v-model="price"></td>
          </tr>
          <tr>
              <td colspan="2"><button @click="addCart">加入购物车</button></td>
          </tr>
      </table>
      <table>
          <thead>
              <tr>
                  <th>编号</th>
                  <th>商品名称</th>
                  <th>价格</th>
                  <th>数量</th>
                  <th>金额</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for = "book in books" :key="book.id">
                  <td>{{ book.id }}</td>
                  <td>{{ book.title }}</td>
                  <td>{{ book.price }}</td>
                  <td><button>删除</button>{{ book.count }}<button>+</button></td>
              </tr>
          </tbody>
      </table>
      <span>总价：0.00</span>
  </div>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: 1
        }
    },
    computed: {
        books() {
            return this.$store.state.items;
        }
    },methons: {
        addCart() {
            this.$store.commit('pushItemToCart', {
                id: this.id,
                title: this.title,
                price: this.price,
                count: this.quantity
            })
            this.id = '';
            this.title = '';
            this.price = '';
        }
    }
}
</script>

<style>

</style>

<template>
  <div>
      <table>
          <tr>
              <td>商品编号</td>
              <td><input type="text" v-model.number="id"></td>
          </tr>
          <tr>
              <td>商品名称</td>
              <td><input type="text" v-model="title"></td>
          </tr>
          <tr>
              <td>商品价格</td>
              <td><input type="text" v-model="price"></td>
          </tr>
          <tr>
              <td colspan="2"><button @click="addCart">加入购物车</button></td>
          </tr>
      </table>
      <table>
          <thead>
              <tr>
                  <th>编号</th>
                  <th>商品名称</th>
                  <th>价格</th>
                  <th>数量</th>
                  <th>金额</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for = "book in books" :key="book.id">
                  <td>{{ book.id }}</td>
                  <td>{{ book.title }}</td>
                  <td>{{ book.price }}</td>
                  <td>金额</td>
                  <td><button>-</button>{{ book.count }}<button>+</button></td>
                  <td><button>删除</button></td>
              </tr>
          </tbody>
      </table>
      <span>总价：0.00</span>
  </div>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: 1
        }
    },
    computed: {
        books() {
            return this.$store.state.items;
        }
    },methons: {
        addCart() {
            this.$store.commit('pushItemToCart', {
                id: this.id,
                title: this.title,
                price: this.price,
                count: this.quantity
            })
            this.id = '';
            this.title = '';
            this.price = '';
        }
    }
}
</script>

<style>

</style>

原来是写错了methods为methons

<template>
  <div>
      <table>
          <tr>
              <td>商品编号</td>
              <td><input type="text" v-model.number="id"></td>
          </tr>
          <tr>
              <td>商品名称</td>
              <td><input type="text" v-model="title"></td>
          </tr>
          <tr>
              <td>商品价格</td>
              <td><input type="text" v-model="price"></td>
          </tr>
          <tr>
              <td colspan="2"><button @click="addCart">加入购物车</button></td>
          </tr>
      </table>
      <table>
          <thead>
              <tr>
                  <th>编号</th>
                  <th>商品名称</th>
                  <th>价格</th>
                  <th>数量</th>
                  <th>金额</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for = "book in books" :key="book.id">
                  <td>{{ book.id }}</td>
                  <td>{{ book.title }}</td>
                  <td>{{ book.price }}</td>
                  <td>金额</td>
                  <td><button>-</button>{{ book.count }}<button>+</button></td>
                  <td><button>删除</button></td>
              </tr>
          </tbody>
      </table>
      <span>总价：0.00</span>
  </div>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: 1
        }
    },
    computed: {
        books() {
            return this.$store.state.items;
        }
    },
    methods: {
        addCart() {
            this.$store.commit('pushItemToCart', {
                id: this.id,
                title: this.title,
                price: this.price,
                count: this.quantity
            })
            this.id = '';
            this.title = '';
            this.price = '';
        }
    }
}
</script>

<style>

</style>
标签
#vue.js #javascript
Vuex状态刷新丢失？vuex-persist持久化原理与生产实践
weixin_29898529的博客
06-21 229
Vuex作为Vue生态中经典的状态管理方案，其store本质是内存对象，生命周期绑定于JavaScript执行上下文，因此页面刷新必然导致状态清空——这是设计使然，而非Bug。要实现跨会话持久化，需借助localStorage等客户端存储机制，通过序列化/反序列化完成状态快照与恢复。vuex-persist正是为此而生的轻量级、非侵入式插件，它基于mutation驱动精准落盘，支持paths路径白名单、reducer脱敏、storage策略切换（localStorage/sessionStorage）等核心
Vuex 在 Vue 2 项目中的工程价值与模块化实践
weixin_30381317的博客
06-21 316
状态管理是前端工程化的核心命题，其本质是解决多组件间数据共享、变更可追溯与协作可维护问题。在 Vue 生态中，Vuex 并非过时方案，而是专为 Vue 2 响应式机制深度优化的确定性状态契约——通过 strict mutation 同步约束保障 time-travel 调试能力，依托 namespaced module 实现业务域隔离与跨模块组合（如 user/permissions + menu/routes），显著降低中大型团队的状态耦合风险。它适用于遗留系统维护、企业级 Vue 2 项目重构及需强审计
Vuex 之state mapState ...mapState 的使用方法
天命爱心职责的博客
01-28 2365
Vuex中的state和vue中的data是是类似的。我们称state为状态，该状态存储是响应式的，挂载到组件的计算属性上，举个栗子：当state中有一条属性 number:'10' ，分别挂载到a组件和b组件上，b组件通过commit改变了number的值，那么b组件中的number也是实时改变的（响应式）。 ...
京东风格Vue电商项目源码｜含购物车下单全流程、模块化Vuex状态管理与防重复路由跳转处理
w3x4y的博客
06-04 248
一套开箱即用的京东UI风格电商系统，完整实现首页轮播与楼层展示、关键词搜索、商品详情查看、加入购物车、结算下单、用户登录注册及个人中心等核心流程。前端基于Vue 2/3（兼容CLI构建），路由层采用Vue Router并内置push/replace方法重写逻辑，彻底规避NavigationDuplicated报错；状态管理按业务域划分Vuex模块（home/search/detail/shopcart/user/trade），结构清晰便于维护和扩展。项目自带mock数据服务（banner、floor、sea
调用Mutation函数的方式
weixin_46370867的博客
02-27 3338
文章目录调用Mutation函数的方式第一种：this.$store.commit()第二种：将指定的 mutations函数，映射为当前组件的methods函数减法计算器应用实例 调用Mutation函数的方式 第一种：this.$store.commit() // 触发mutation methods: { handle1() { //触发mutations的第一种方式 this.$store.commit ( 'add ' ) } } 可以在触发mut
vuex-mapState
weixin_44774062的博客
10-12 304
state里面的数据在使用的时候，一般是挂在computed里面的，因为如果你挂在data上面，只会赋值一次，不会跟着vuex里面的变化而同步变化，当然也可以通过watch $store去解决这个问题，如下: computed: { hasBg(){ return this.$store.state.hasBg } } 有了vuex，我们不必在考虑组件之间的传值，直接就可以通过$store来获取不同的数据，这样写就太啰嗦了，我们可以将它定义在computed中:
vuex中的mutations的两种调用方法
程序员徐小白的博客
04-19 1万+
直接通过$store.commit调用 <button @click="$store.commit('mutations中的方法名','可带参数')">调用</button> 不需要再进行其他配置 通过在methods中注册方法调用 //先引入mapMutations import {mapMutations} from 'vuex' export defau...
商城小程序（7.加入购物车）
Kiritoasu的博客
01-08 2039
本章完成商城小程序加入购物车功能
Vue基础教程（206）网上购物商城开发实战之系统功能模块设计与实现中的购买模块：Vue购物车剁手指南：从“加入购物车”到“买买买”的奇幻漂流
jxf_jxfcsdn的博客
10-07 304
网上商城最让人上头的就是购买模块——点一下“加入购物车”，钱包就瘦身成功。本文用Vue实战带你拆解购买模块的底层逻辑，从商品展示、购物车管理到下单支付，全程高能。你将学会用Vuex管理“购物车纠结症”，用组件封装“剁手冲动”，最后附完整代码，教你如何把“暂时缺货”变成“立即下单”。友情提示：阅读前请握紧手机，防止过于兴奋手滑下单！
nxdc-milktea 状态管理实战：Vuex 如何优雅管理购物车、订单与用户全局状态
最新发布
gitblog_00501的博客
08-18 246
提到小程序前端模板，很多人第一反应是"页面多、数据乱、状态散"。一套仿奈雪の茶的小程序模板 **nxdc-milktea**，却把购物车、订单、用户信息这些"老大难"全局状态管理得井井有条，秘密就在于它只用了一个 50 多行的 Vuex 文件。本文就带新手朋友走进 nxdc-milktea 的 Vuex 状态管理实战，看它如何用最轻量的方式统一管理购物车、订单与用户全局状态，学会这套方案，你自己的
vuex异步获取数据_「vue基础」写给 Vuex 初学者的使用指南
weixin_35796523的博客
01-03 540
大家好，在前面的几篇文章里我们一起学习了Vue相关的基础知识，想复习基础的同学可以点击文末链接进行回顾。今天我们将学习 Vue 的 State Management(状态管理)：Vuex，我们在构建大型应用时 ，State Management 的处理至关重要。一、Vuex 简介随着业务的增加，我们的应用程序也变得越来越复杂，每个组件都有自己的数据状态，再加上组件之间的数据传递问题，一个数据的变化...
Vue.js 2 项目实战（五）：水果购物车
Flag少侠的博客
07-23 1万+
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的设计目标是通过采用易于上手的结构和强大的功能，使前端开发变得更加简便和高效。
vue2——vuex（状态管理模式）
assassin_0302的博客
02-26 747
它采用集中式存储来管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 为什么要使用状态管理？？？ 比如一个情景，我们的一个应用有很多数据和状态。这个应用也是用很多的组件拼成的。 每个组件之间会共享一个状态。比如说：用户的登录状态、或者是一个购物车。然后这个购物车数据在很多页面用到了，当我在某个页面改变这个购物车数据时，页面也要进行一个同步的更新。比较简单的就是使用emit。但是当组件使用数量过多就会变得很复杂。 那么状态管理的模型是解决这个问题的。它有一个统一的数据中心，就
Vue基础教程（193）Vuex中的state对象：别再说Vuex的state是你的“单身公寓”了！这分明是祖传大别墅的房产证
jxf_jxfcsdn的博客
10-06 329
Vuex里的state对象可不是你组件里那个可以随便折腾的data！它更像是个祖传大别墅的房产证，得按规矩来。本文将用最接地气的方式，带你搞懂这个“房产证”到底该怎么用。从基本操作到高级玩法，再到两个完整示例（用户信息和购物车），让你彻底明白为什么state需要特别关照。记住，在Vuex里乱改state，就像在房产证上乱涂乱画——后果很严重！
我用vue开发了一个动态网站--百宝阁 万字长文（spa电商，首页没有做动态，搜索页是动态）
m0_53394907的博客
02-17 1487
vue实现了动态的电商网站，并尝试了微信二维码的生成和token的使用，包括注册和登录，路由守卫的限制，nginx反向代理的一些注意事项。
vuex报错Computed property “xxx“ was assigned to but it has no setter.
m0_37922443的博客
02-02 2216
Computed property "activeTab" was assigned to but it has no setter.
Vue 2项目集成Pinia状态管理：从Vuex迁移到现代架构实战
weixin_33816821的博客
08-10 369
状态管理是构建复杂前端应用的核心概念，它通过集中管理应用状态，确保数据流的一致性和可预测性。其原理在于提供一个全局响应式存储，组件通过订阅状态变化实现高效更新。在Vue生态中，Pinia作为新一代官方状态管理库，凭借其简洁的API设计、出色的TypeScript支持以及去除了Mutation的直观操作模式，为开发者带来了显著的开发体验提升和技术价值。它尤其适用于需要模块化、类型安全和更佳维护性的大型应用场景。本文聚焦于在Vue 2项目中引入Pinia的完整方案，详细解析了如何通过@vue/compositi
实战Vue：基于Vue的移动端购物商城
热门推荐
KaiSarH
11-27 7万+
基于Vue的移动端购物商城
Vuex核心概念与实战：State、Mutations、Actions、Getters、Modules详解
weixin_33888907的博客
08-15 323
在Vue.js应用开发中，状态管理是构建复杂单页应用（SPA）的核心挑战。其核心原理在于通过集中式存储管理应用的所有组件的状态，确保状态变更的可预测性和可追踪性。这一模式的技术价值在于解决了组件间状态共享混乱的问题，为大型应用提供了清晰的数据流架构。在实际应用场景中，无论是用户登录状态管理、购物车数据同步，还是多模块数据共享，一个设计良好的状态管理方案都至关重要。本文聚焦于Vuex这一Vue.js官方状态管理库，深入剖析其五个核心概念——State、Mutations、Actions、Getters和Mod
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值