全国服务热线:4008-888-888

公司新闻

在线下单小程序_vuex完成购物车功用

vuex实现购物车功能     -He   这篇文章主要为大家详细介绍了vuex实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下

页面布局:

采用了element-ui的表格对商品列表和购物车列表进行布局

1、商品列表

 template 
 div 
 table 
 el-table :data="shopList" 
 el-table-column label="id" width="180" 
 template slot-scope="scope" 
 i /i 
 span {{ scope.row.id }} /span 
 /template 
 /el-table-column 
 el-table-column label="名称" width="180" 
 template slot-scope="scope" 
 el-popover trigger="hover" placement="top" 
 p {{ scope.row.name }} /p 
 div slot="reference" 
 el-tag size="medium" {{ scope.row.name }} /el-tag 
 /div 
 /el-popover 
 /template 
 /el-table-column 
 el-table-column label="价格" width="180" 
 template slot-scope="scope" 
 el-popover trigger="hover" placement="top" 
 p {{ scope.row.price }} /p 
 div slot="reference" 
 el-tag size="medium" {{ scope.row.price }} /el-tag 
 /div 
 /el-popover 
 /template 
 /el-table-column 
 el-table-column label="操作" 
 template slot-scope="scope" 
 el-button size="mini" @click="add(scope.row)" 添加 /el-button 
 /template 
 /el-table-column 
 /el-table 
 /table 
 /div 
 /template 

shopList数据:

//模拟商品列表数据
 shop_list: [{
 id: 11,
 name: '鱼香肉丝',
 price: 12,
 }, {
 id: 22,
 name: '宫保鸡丁',
 price: 14
 }, {
 id: 34,
 name: '土豆丝',
 price: 10
 }, {
 id: 47,
 name: '米饭',
 price: 2
 id: 49,
 name: '蚂蚁上树',
 price: 13
 id: 50,
 name: '腊肉炒蒜薹',
 price: 15
 }],

购物车列表

因为我们还没添加商品,所以购物车为空

现在用vuex编写功能函数

在store.js中

在state中:定义两个变量,分别是商品列表,购物车列表,购物车开始为空

在getters中

有四个计算变量,分别是商品列表,购物车列表、购物车商品总数量和总价格的实时更新

在mutations中:

addCart:如果商品已经添加过了就无须添加,只对其数量增加

在actions中:

完整代码

shop-list.vue页面

 template 
 div 
 table 
 el-table :data="shopList" 
 el-table-column label="id" width="180" 
 template slot-scope="scope" 
 i /i 
 span {{ scope.row.id }} /span 
 /template 
 /el-table-column 
 el-table-column label="名称" width="180" 
 template slot-scope="scope" 
 el-popover trigger="hover" placement="top" 
 p {{ scope.row.name }} /p 
 div slot="reference" 
 el-tag size="medium" {{ scope.row.name }} /el-tag 
 /div 
 /el-popover 
 /template 
 /el-table-column 
 el-table-column label="价格" width="180" 
 template slot-scope="scope" 
 el-popover trigger="hover" placement="top" 
 p {{ scope.row.price }} /p 
 div slot="reference" 
 el-tag size="medium" {{ scope.row.price }} /el-tag 
 /div 
 /el-popover 
 /template 
 /el-table-column 
 el-table-column label="操作" 
 template slot-scope="scope" 
 el-button size="mini" @click="add(scope.row)" 添加 /el-button 
 /template 
 /el-table-column 
 /el-table 
 /table 
 /div 
 /template 
 script 
import{mapActions} from "vuex";
export default {
 data() {
 return {
 computed:{
 shopList(){
 return this.$store.getters.getShopList
 methods: {
 add(row){
 this.$store.dispatch('addToCart',{id:row.id,name:row.name,price:row.price})
 /script 
 style lang="less" scoped 
.shop-list {
 width: 500px;
 /style 

shop-cart.vue页面

 template 
 div 
 table 
 el-table :data="cartData" 
 el-table-column label="id" width="180" 
 template slot-scope="scope" 
 i /i 
 span {{ scope.row.id }} /span 
 /template 
 /el-table-column 
 el-table-column label="名称" width="180" 
 template slot-scope="scope" 
 el-popover trigger="hover" placement="top" 
 p {{ scope.row.name }} /p 
 div slot="reference" 
 el-tag size="medium" {{ scope.row.name }} /el-tag 
 /div 
 /el-popover 
 /template 
 /el-table-column 
 el-table-column label="价格" width="180" 
 template slot-scope="scope" 
 el-popover trigger="hover" placement="top" 
 p {{ scope.row.price }} /p 
 div slot="reference" 
 el-tag size="medium" {{ scope.row.price }} /el-tag 
 /div 
 /el-popover 
 /template 
 /el-table-column 
 el-table-column label="数量" width="180" 
 template slot-scope="scope" 
 el-button size="mini" @click="reduceNum(scope.row)" :disabled="scope.row.num == 1" - /el-button 
 span id="num" {{scope.row.num}} /span 
 el-button size="mini" @click="addNum(scope.row)" + /el-button 
 /template 
 /el-table-column 
 el-table-column label="操作" 
 template slot-scope="scope" 
 el-button size="mini" @click="del(scope.$index,scope.row)" 删除 /el-button 
 /template 
 /el-table-column 
 /el-table 
 /table 
 div 
 span 总数量{{totalNum}} /span 
 span 总价格{{totalPrice}} /span 
 el-button type="danger" @click="clearCart" 清空购物车 /el-button 
 /div 
 /div 
 /template 
 script 
 import {mapGetters,mapActions} from "vuex";
export default {
 data() {
 return {
 shop_list: [
 id: 11,
 name: "鱼香肉丝",
 price: 12
 id: 22,
 name: "宫保鸡丁",
 price: 14
 id: 34,
 name: "土豆丝",
 price: 10
 id: 47,
 name: "米饭",
 price: 2
 id: 49,
 name: "蚂蚁上树",
 price: 13
 id: 50,
 name: "腊肉炒蒜薹",
 price: 15
 computed:{
 ...mapGetters({
 cartData:'addShopList',
 totalNum:'totalNum',
 totalPrice:'totalPrice'
 methods: {
 clearCart() {
 this.$store.dispatch('clearToCart')
 addNum(row){
 this.$store.dispatch('addNum',{id:row.id})
 reduceNum(row){
 this.$store.dispatch('reduceNum',{id:row.id})
 del(index,row){
 this.$store.dispatch('delToShop',{id:row.id})
 /script 
 style lang="less" scoped 
.shop-list {
 width: 500px;
 margin-top: 20px
#num{
 margin: 0 10px
.total{
 margin-top: 30px;
 text-align: center;
 span{
 margin-right: 20px
 /style 

App.vue

 template 
 div 
 shop-list/ 
 shop-cart/ 
 /div 
 /template 
 script 
// @ is an alias to /src
import shopList from '../components/shop-list.vue'
import shopCart from '../components/shop-cart.vue'
export default {
 name: 'home',
 components: {
 shopList,shopCart
 data(){
 return{
 val:''
 methods:{
 parent(childValue){
 // console.log(childValue)
 // this.val = childValue;
 this.val = childValue
 handle(){
 console.log('gg')
 /script 

关于vue.js组件的教程,请大家点击专题进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服