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

这期内容当中小编将会给大家带来有关使用vuex如何实现一个购物车功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

购物车组件

商品列表

  @import url('../../static/public.less');

选中商品列表

  @import url('../../static/public.less');
  .dele-btn{
    background-color: red !important;
  }
  .dele-btn:hover{
    background-color: #bd0000 !important;
  }

vuex 创建

npm install vuex --save,创建vuex文件夹，在文件夹中创建store.js，引入vuex；

import Vue from "vue";
import Vuex from 'vuex';
import cart from "./modules/cart";
Vue.use(Vuex);
export default new Vuex.Store({
  modules:{
    cart
  }
})

建立一个模块文件夹modules，里面创建创建当个store模块，然后默认输出，在store.js中引入；

const state = {
  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
  }],
  add:[]
}
const getters ={
  //获取商品列表
  getShopList:state => state.shop_list,
  //获取购物车列表
  addShopList:state => {
    return state.add.map(({id,num})=>{
      let product = state.shop_list.find(n => n.id == id);
      if(product){
        return{
          ...product,
          num
        }
      }
    })
  },
  //获取总数量
  totalNum:(state,getters) =>{
    let total =0;
    getters.addShopList.map(n=>{
      total += n.num;
    })
    return total;
  },
  //计算总价格
  totalPrice:(state,getters)=>{
    let total=0;
    getters.addShopList.map(n=>{
      total += n.num*n.price
    })
    return total;
  },
}
const actions={
  //加入购物车
  addToCart({commit},product){
    commit('addCart',{
      id:product.id
    })
  },
  //清空购物车
  clearToCart({commit}){
    commit('clearCart')
  },
  //删除单个物品
  deletToShop({commit},product){
    commit('deletShop',product)
  }
}
const mutations ={
  //加入购物车
  addCart(state,{id}){
    let record = state.add.find(n => n.id == id);
    if(!record){
      state.add.push({
        id,
        num:1
      })
    }else{
      record.num++;
    }
  },
  //删除单个物品
  deletShop(state,product){
    state.add.forEach((item,i)=>{
      if(item.id == product.id){
        state.add.splice(i,1)
      }
    })
  },
  //清空购物车
  clearCart(state){
    state.add=[];
  }
}
export default{
  state,
  getters,
  actions,
  mutations
}

上述就是小编为大家分享的使用vuex如何实现一个购物车功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。