基于vuex实现购物车功能

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

先看效果:

代码：

table {
 width: 800px;
 margin: 0 auto;
 border: 1px solid #ccc;
 border-spacing: 0;
}
tbody th,
tbody td {
 border: 1px solid #ccc;
 text-align: center;
}
h1{
 text-align: center;
}
.add{
 width: 800px;
 margin: 0 auto;
}

父组件

 .add{
 width: 800px;
 text-align: center;
 }

```bash

vuex组件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({
 state: {
 list: [{
 id: 1,
 name: "哇哈哈",
 price: 3,
 count: 0
 },
 {
 id: 2,
 name: "哇哈",
 price: 3,
 count: 0
 }
 ]
 },
 getters: {
 //获取购物车数据
 getlist(state) {
 return state.list
 },
 //商品的总价
 getShopTotal(state,index) {
 let result = 0;
 state.list.forEach((item, index) => {
 result += item.price * item.count
 })
 return result
 },
 },
 mutations: {
 //删除购物车单个数据
 remoteList(state,index) {
 state.list.splice(index, 1);
 console.log("aaa",state)
 },
 //商品数量增加
 addList(state, index) {
 state.list[index].count++;
 },
 //商品数量减少
 deleteList(state, index) {
 state.list[index].count--;
 if(state.list[index].count<=0){
 state.list[index].count = 0
 return ;
 }
 },

 //清除购物车
 clearList(state, arr) {
 state.list = arr
 },
 addShopList(state,shop){
 state.list.push(shop)
 }
 },
 //使用actions调用mutations方法
 actions: {
 remoteList({
 commit
 }, index) {
 commit("remoteList", index)
 },
 addList({
 commit
 }, index) {
 commit("addList", index)
 },
 deleteList({
 commit
 }, index) {
 commit("deleteList", index)
 },
 clearList({
 commit
 }, arr) {
 commit("clearList", arr)
 },
 addShopList({commit},shop){
 commit("addShopList",shop)
 }
 },
 modules: {}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。