Vuex shopping cart collection implementation

Use vuex to store favorites

Realize that you can collect on the list page, and you can also view it on the collection

 

Icon download, color, size and format can be chosen

http://www.iconfont.cn/

 

Vuex manages the status, provides add and delete operations, and determines whether a product has been favorited

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

Vue.use(Vuex)

const state = {
  list: []
}

const mutations = {
  add(state, item) {
    state.list.push(item)
    state.list = Array.from(new Set(state.list));
  },

  remove(state, item) {
    state.list = state.list.filter((i) => {
      return i['name'] != item['name']
    })
  }
}

const getters = {
  isExit: (state, getters) =>
    (i) => state.list.some(
      (item) => item['name'] == i['name']
    )
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
})

 

Tabs are used to switch routes and display different pages

<template>
  <div>
    <img
      class="img"
      v-for="i,index in items"
      :src="index==cur_index?i[1]:i[0]"
      @click="click(i,index)"></div>
</template>

<script>
  export default {
    name: "tab",
    data() {
      return {
        cur_index: 0,
        items: [
          [
            '/static/imgs/cart_base.png',
            '/static/imgs/cart_active.png',
            '/item_page',
          ],
          [
            '/static/imgs/collection_base.png',
            '/static/imgs/collection_active.png',
            '/collect'
          ]
        ]
      }
    },
    methods: {
      click(i, index) {
        console.log(i)
        this.cur_index = index
        this.$router.push(i[2])
      }
    }
  }
</script>

<style scoped>
  .img {
    width: 50px;
    height: 50px;
  }
</style>

 

 

item displays product information, in which the status of whether the product is collected is obtained through vuex

<template>
  <div class="item">
    <span>name:{{book.name}}</span>
    <span>price:{{book.price}}</span>
    <div class="img" :class="{active:isCollect,base:!isCollect}" @click="change"></div>
  </div>
</template>

<script>
  export default {
    name: "item",
    props: ['book'],
    computed: {
      isCollect() {
        return this.$store.getters.isExit(this.book)
      }
    },
    methods: {
      change() {
        this.isCollect ? this.$store.commit('remove', this.book)
          : this.$store.commit('add', this.book)
      }
    }
  }
</script>

<style scoped>
  .item {
    display: inline-flex;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
  }

  .img {
    width: 50px;
    height: 50px;
  }

  .active {
    background: url("/static/imgs/heart_active.png");
    background-size: cover;
  }

  .base {
    background: url("/static/imgs/heart_base.png");
    background-size: cover;
  }
</style>

 

 

item-page, showing a list of products

<template>
  <div>
    <div v-for="i in books">
      <Item :book="i"></Item>
    </div>
  </div>
</template>

<script>
  import Item from './Item'

  export default {
    name: "item-page",
    components: {
      Item,
    },
    data() {
      return {
        books: [
          {
            name: 'a',
            price: 1,
          },
          {
            name: 'b',
            price: 2,
          }, {
            name: 'c',
            price: 3,
          }, {
            name: 'd',
            price: 4,
          },
        ]
      }
    }
  }
</script>
 

 

collection, display a list of items that have been collected

<template>
  <div>
    <h1>
      collect
    </h1>
    <Item v-for="i,index in items"
          :key="i.name"
          :book="i"
    ></Item>
  </div>
</template>

<script>
  import Item from './Item'

  export default {
    name: "collect",
    components: {
      Item,

    },
    computed: {
      items() {
        return this.$store.state.list
      }
    }
  }
</script>
 

 

cart is the main page of the shopping cart, where routing views and tabs are placed

<template>
  <div class="cart">
    <router-view></router-view>
    <tab class="tab"></tab>
  </div>
</template>

<script>
  import Tab from './Tab'

  export default {
    name: "cart",
    components: {
      Tab,
    },

  }
</script>

<style scoped>

  .cart {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .tab{
    position: fixed;
    bottom: 0px;
    background: grey;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
</style>