基于vuex实现购物车功能

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

先看效果:

代码：

template>
     div class="Home">
     h1>
    vuex购物车案例/h1>
     add-From>
    /add-from>
     shop-cart>
    /shop-cart>
     /div>
    /template>
    script>
import AdDFrom from './Add.vue'import ShopCart from './ShopCart.vue'// @ is an alias to /src// import HelloWorld from '@/components/HelloWorld.vue'export default {
 name: 'Home', components: {
 AddFrom, ShopCart }
,}
    ;
    /script>
    style>
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;
}
    /style>
    

父组件

template>
     div class="add">
     div class="from-group">
     label for="">
    商品编号/label>
     input tyPE="text" v-model="shop.id" placeholder="请输入商品编号">
     /div>
     div class="from-group">
     label for="">
    商品名称/label>
     input type="text" v-model="shop.name" placeholder="请输入商品名称">
     /div>
     div class="from-group">
     label for="">
    商品价格/label>
     input type="text" v-model="shop.PRice" placeholder="请输入商品价格">
     /div>
     div class="from-group">
     label for="">
    商品数量/label>
     input type="text" v-model="shop.count" placeholder="请输入商品数量">
     /div>
     div class="from-group">
     button @click="add">
    添加商品/button>
     /div>
     /div>
    /template>
    script>
export default {
 name: 'add', data() {
 return {
 shop:{
}
 }
    ;
 }
, methods:{
 add(){
  this.$Store.dispatch("addShopList",this.shop) this.shop = {
 id:"", name:"", price:"", count:"" }
 }
 }
}
    ;
    /script>
    style scoped>
 .add{
     width: 800px;
     text-align: center;
 }
    /style>
    

```bash

template>
     div class="Shop-Cart">
     table>
     thead border>
     tr>
      th>
    商品编号/th>
      th>
    商品名称/th>
      th>
    商品价格/th>
      th>
    商品数量/th>
      th>
    小计/th>
      th>
    操作/th>
     /tr>
     /thead>
     tbody v-if="shop.length >
     0">
     tr v-for="(i, e) in shop" :key="e">
      td>
{
{
 i.id }
}
    /td>
      td>
{
{
 i.name }
}
    /td>
      td>
{
{
 i.price }
}
    /td>
      td>
      button @click="add(e)">
    +/button>
      input type="text" v-model="i.count" />
      button @click="delet(e)">
    -/button>
      /td>
      td>
￥{
{
 i.price * i.count }
}
    /td>
      td>
    button @click="del(e)">
    删除/button>
    /td>
     /tr>
     /tbody>
     tfoot>
     tr>
      td colspan="6" align="right">
总计：{
{
 total }
}
    /td>
      button @click="clear">
    清除购物车/button>
     /tr>
     /tfoot>
     /table>
     /div>
    /template>
    script>
export default {
 name: 'Shop-Cart', components: {
}
, data() {
 return {
}
    ;
 }
, computed: {
 shop() {
     return this.$store.getters.getlist;
 }
, total() {
     return this.$store.getters.getShopTotal;
 }
 }
, methods: {
 del(e) {
     // this.$store.dispatch() this.$store.dispatch('remoteList', e);
 }
, add(e) {
     this.$store.dispatch('addList', e);
 }
, delet(e) {
     this.$store.dispatch('deleteList', e);
 }
, clear() {
     this.$store.dispatch('clearList', []);
 }
 }
}
    ;
    /script>
    

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实现简单购物车
• Vuex实现购物车小功能
• vuex实现购物车的增加减少移除
• vuex实现购物车功能
• 使用vuex较为优雅的实现一个购物车功能的示例代码
• vuex实现的简单购物车功能示例
• 用vuex写了一个购物车H5页面的示例代码
• vuex实现简单的购物车功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！