使用vuex怎么实现一个购物车功能-创新互联

使用vuex怎么实现一个购物车功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

代码：

父组件

 .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: {}
})

关于使用vuex怎么实现一个购物车功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。