我们先看看效果图：

备注：本人按照浅谈vuex，购物车实例这篇文章的步骤进行实操，将这个购物车实现了出来，自己模仿京东写了这套样式哦，轻喷谢谢~。

技术栈：vue-cli3 + vuex

1.搭建脚手架

在我以往的博客中有，我在实验楼上架销售的课程（i护理）有教授如何搭建一个 vue-cli3 脚手架哦。

感兴趣的可以瞧瞧，亲测敏感肌可用哦~

前两节是试学，免费滴~

2.知识储备

灵感来源：浅谈vuex，购物车实例

State

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态，将所需要的数据写放这里，类似于data。

Getter

有时候我们需要从 store 中的 state 中派生出一些状态，使用Getter，类似于computed。

Mutation

更改 Vuex 的 store 中的状态的唯一方法，类似methods。

Action

Action 提交的是 mutation，而不是直接变更状态，可以包含任意异步操作，这里主要是操作异步操作的，使用起来几乎和mutations方法一模一样,类似methods。

Module

当应用变得非常复杂时，store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

更多了解 Vuex :
面试官：请你说一说vuex的五个属性，分别是什么，区别和用途说一下

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vue有五个核心概念，state, getters, mutations, actions, modules。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel调试、状态快照导入导出等高级调试功能。
状态管理: 简单理解就是统一管理和维护各个vue组件的可变化状态(你可以理解成vue组件里的某些data)
vuex借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

3.使用Vuex

1.在src下的store文件夹新建modules文件夹以及新建shop.js文件

另外我们还需要在store文件夹下新建mutations.js，mutation-types.js等文件，如下图所示：

2.在main.js文件中引入上面创建的store.js

import store from './store'

3.将要存放的数据写在state对象中，state则存写在index.js文件中。

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import shop from './modules/shop'Vue.use(Vuex)
const state = {goods: [{id: '0',name: 'PRAMY/柏瑞美定妆喷雾快速持久定妆不易脱妆控油保湿...',hint: '柔焦雾面（黑瓶）100ml',price: 59.90,num: 0,img: 'https://labfile.oss.aliyuncs.com/courses/2741/black.jpeg'},{id: '1',name: '美国进口EltaMD氨基酸泡沫洁面乳 清洁毛孔',hint: '氨基酸洁面乳207ml/瓶',price: 160.00,num: 0,img: 'https://labfile.oss.aliyuncs.com/courses/2741/white.jpeg'},{id: '2',name: '苹果Apple MacBook Air 2020新款13.3英寸苹果笔记本电脑超薄轻薄本',hint: '银色 12期白条分期款 /10代i3/8G/256G',price: 8799.00,num: 0,img: 'https://labfile.oss.aliyuncs.com/courses/2741/mac.jpeg'},{id: '3',name: '科颜氏（Kiehl’s）全波段卓效防护',hint: '户外清爽防晒乳液SPF50 60ml',price: 128.00,num: 0,img: 'https://labfile.oss.aliyuncs.com/courses/2741/white.jpeg'},],totalPrice: 0.00,totalNum: 0
}export default new Vuex.Store({state,mutations,actions,getters,modules: {shop //shop模块}
})

4.将改变state原始数据的方法写在mutation.js文件中，可以使用常量替代 Mutation 事件类型，用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。可以让你的代码合作者对整个 app 包含的 mutation 一目了然

使用常量，mutation-type.js文件

export const ADD_CART = 'ADD_CART'
export const REDUCE_CART = 'REDUCE_CART'

mutation.js文件

import {ADD_CART,REDUCE_CART
} from './mutation-types.js'
export default {[ADD_CART] (state, id) {state.goods[id].num++state.totalNum++state.totalPrice += state.goods[id].price// console.log(state.totalPrice)},[REDUCE_CART] (state, id) {if (state.goods[id].num > 0) {state.goods[id].num--state.totalNum--state.totalPrice -= state.goods[id].price}}
}

5.对state数据派生出一些状态，例如需要知道商品的个数

const getters = {goods_obj: state => state.goods,goods_length: state => state.goods.length
}
export default getters

6.使用vuex，获取数据，方法。

<template><div class="shop_box"><!-- 顶部 --><div class="top_box"><div class="left"></div><div class="middle">购物车</div><div class="right">编辑</div></div><!-- 分类的tapd --><div class="sort_box"><div>全部</div><div>降价</div><div>常买</div><div>分类</div></div><ul class="shop_container"><li v-for="item in $store.state.goods" :key="item.id" class="shop_container_li"><div class="shop_img"><img :src="item.img" alt=""/></div><div class="shop_detail"><!-- 名字 --><div class="shop_name">{{item.name}}</div><!-- 简介 --><div class="shop_hint">{{item.hint}}</div><!-- 价格 --><div class="shop_price_box"><div class="shop_price_left">￥{{item.price}}</div><div class="shop_computed_right" style="display:flex;margin-right:1rem;font-size:1rem;width: 50%;"><div class="shop_reduce" style="margin-right:1rem" @click="reduce_num(item.id)">-</div><div class="shop_num" style="background:gray;padding:0.3rem 0.8rem">{{item.num}}</div><div class="shop_add" style="margin-left:1rem;" @click="add_num(item.id)">+</div></div></div></div></li></ul><div style="margin-bottom:4rem"></div><div class="foot"><div class="total_num" :class="{payment: totalNum}"><span>共计商品: <span class="price">{{totalNum}}&nbsp;</span>件</span></div><div class="total_price"><span>合计: ￥<span class="price">{{totalPrice.toFixed(2)}}</span></span></div></div></div>
</template><script>
import {mapState, mapMutations, mapGetters} from 'vuex'
export default {name: 'HelloWorld',data () {return {}},created () {// console.log(this.goods)// console.log(this.goods_obj)// console.log(this.goods_length)// console.log(this.$store.state.shop)  // 模块化 Vuex允许我们将 store 分割成模块（module）每个模块拥有自己的 state、mutation、action、getter、},computed: {...mapState([// 获取state中的数据可以通过mapState辅助函数获取，也可以直接获取 例：this.$store.state.goods'goods', 'totalPrice', 'totalNum']),...mapGetters(['goods_obj', 'goods_length'])},methods: {...mapMutations([// 获取mutation中的方法可以通过mapMutations 辅助函数获取，也可以直接获取。'ADD_CART'// 'REDUCE_CART']),reduce_num (id) {// this.REDUCE_CART(id)this.$store.commit('REDUCE_CART', id) //也可以直接获取},add_num (id) {this.ADD_CART(id) //通过mapMutations 辅助函数获取}}
}
</script><style lang="scss" scoped>
.shop_box{background: black;color: white;// margin-top: -1.1rem;position: fixed;overflow-y: scroll;top: 0;left: 0;right: 0;bottom: 0;.top_box{display: flex;align-items: center;justify-content: space-around;margin-top:0.5rem;}.middle{text-align: center;font-size: 1.1rem;font-weight: 300;margin-left: 0.8rem}.right{font-size: 1rem;font-weight: 300;}.sort_box{display: flex;align-items: center;justify-content: space-around;margin:0.9rem 0;font-weight: 300;font-size: 1rem;}.shop_container{.shop_container_li{margin-top: 1rem;background: #100f10;display:flex;.shop_img{>img{width: 10rem;height: 10rem;border-radius: 0.5rem;margin-left: 0.5rem;}}.shop_detail{margin-left: 0.5rem;.shop_name{margin:0.5rem 0;// width: 12rem;// overflow: hidden;// text-overflow:ellipsis;// white-space: nowrap;// height: 1rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}.shop_hint{font-size: 0.7rem;background: #242022;color:rgba(238, 241, 241, 0.281);margin-left: 0.8rem;}.shop_price_box{display:flex;margin-top: 3rem;// justify-content: space-between;.shop_price_left{color:red;font-size: 1.3rem;width: 50%;}}}}}.foot{position: fixed;bottom:0;display:flex;justify-content: space-between;font-size: 1rem;align-items: center;height: 3.5rem;padding:1rem;background: rgb(100, 98, 98);width: 100%;.total_num{.price{font-size: 1.4rem;}}.total_price{.price{font-size: 1.4rem;}}}}
</style>

7.假如数据过多，复杂，可以进行模块化来开发，可以将上述的state，mutation，action等可以同时写在shop.js文件中，此时shop就是一个模块了

总结

若数据不是很多，也不复杂，我们也可以在构造vue实例data中存放我们所需要的共用数据。一旦数据较多，复杂，vuex是一个非常不错的选择。

【Vuex】模仿京东购物车，用Vuex实现一个购物车功能相关推荐

vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车
一.购物车基础 1)购物车状态设计cartFoods+mutation store/state.js // 所有要管理的状态数据:从页面需求分析出来,最好和api/index.js里的命名相同 exp ...
uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins
1.0 创建 goodslist 分支 1.1 定义请求参数对象为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象: data() {return {// 请求参数对 ...
用uniapp做电商项目时使用vuex实现数据的全局共享来做购物车页面
一.配置vuex: 1.在项目根目录中创建store文件夹,专门用来存放vuex相关的模块 2.在store目录中新建store.js文件 3.在store.js初始化store的实例对象 //1.导 ...
070——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
两个组件绑定vuex中相同的状态值，但是一个组件改变的时候，另一个组件中的值同步改变了，但是页面没有更新
最近在做项目中,遇到了一个问题,就是两个组件绑定vuex中相同的状态值,但是一个组件改变的时候,另一个组件中的值同步改变了,但是页面没有更新,只有数组有这个问题.后来思路就是深度监听到数组改变后,再更 ...
【HTML】HTML5网页作业----模仿京东，模仿站点
1.引言设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决的问题,在微信 ...
vuex是什么？怎么使用？哪种功能场景使用它？
1.vuex 就是一个仓库,仓库里放了很多对象.其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data 2.state 里面存放的数据是响应式的,vue 组件从 store 读取 ...
Vuex是什么？Vuex能做什么？Vuex怎么使用？
Vuex是什么?Vuex能做什么?Vuex怎么使用? 1.Vuex是什么?哪种功能场景使用它? 2.Vuex有哪几种属性? 3.使用Vuex的好处? 4.使用Vuex示例. 见下文. Vuex是什么? ...
VUE === vuex是什么？怎么使用？哪种功能场景使用它？
只用来读取的状态集中放在store中: 改变状态的方式是提交mutations,这是个同步的事物: 异步逻辑应该封装在action中. 在main.js引入store,注入.新建了一个目录store, ...

【Vuex】模仿京东购物车，用Vuex实现一个购物车功能

我们先看看效果图：

1.搭建脚手架

2.知识储备

3.使用Vuex

总结

【Vuex】模仿京东购物车，用Vuex实现一个购物车功能相关推荐

最新文章

热门文章