Vuex实现简单购物车

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

文件结构

App.vue

template>
     div id="app">
     h3>
    Shopping Cart Demo/h3>
     hr>
     h4>
    PRoducts:/h4>
     ProductList />
     hr>
     h4>
    my Cart/h4>
     ShoppingCart />
     /div>
    /template>
    script>
    import ProductList From '@/components/ProductList';
    import ShoppingCart from '@/components/ShoppingCart';
 export default {
 components: {
 ProductList, ShoppingCart }
}
    /script>
    

Products.vue

template>
     div>
      ul v-for="ITem in products" :key="item.id">
      li>
   {
{
 item.title }
}
 - {
{
 item.price }
}
     &
    nbsp;
    &
    nbsp;
 库存： {
{
 item.inventory }
}
    br>
       button :disabled="!item.inventory" @click="addToCart(item)">
    add to cart/button>
       /li>
      /ul>
     /div>
     /template>
     script>
import {
 mapGetters, mapActions }
     from 'vuex';
export default {
 computed: {
 // ...mapGetters('products',{
 // products: 'allProducts' // }
) ...mapGetters({
  products: 'products/allProducts' }
) }
, methods: {
 ...mapActions('cart',['addToCart']) }
, created() {
     this.$Store.dispatch('products/getAllProducts');
 }
 }
    /script>
    

ShoppingCart.vue

template>
     div>
     ul v-for="item in products" :key="item.id">
      li>
{
{
 item.title }
}
 *{
{
 item.quantity }
}
    /li>
     /ul>
     div>
total: {
{
 total }
}
    /div>
     /div>
    /template>
    script>
import {
 mapGetters }
     from 'vuex';
export default {
 computed: {
 ...mapGetters('cart', {
  products: 'cartProducts',  total: 'cartTotalPrice' }
) }
}
    /script>
    

modules/products.js

import api from '../../api';
 const state = {
 all: []}
 const getters = {
     allProducts: state =>
 state.all}
 const actions = {
 // 获取初始商品数据 getAllProducts({
 commit }
) {
     api.getProducts(products =>
     commit('setProducts', products));
 }
}
 const mutations = {
 setProducts(state, products) {
     state.all = products;
 }
, // 减少该商品库存 decreamentInventory(state, {
 id }
) {
     let productItem = state.all.find(item =>
     item.id === id);
     productItem.inventory --;
 }
}
 export default {
 namespaced: true, state, getters, actions, mutations}
    

modules/cart.js

const state = {
 addedList: []}
 const getters = {
 cartProducts(state, getters, rootState) {
     return state.addedList.map((item, index) =>
 {
      let productItem = rootState.products.all.find(product =>
     product.id === item.id);
  return {
  title: productItem.title,  price: productItem.price,  quantity: item.quantity  }
 }
) }
, cartTotalPrice(state, getters) {
     return getters.cartProducts.reduce((total, product) =>
 {
      return total + (product.price * product.quantity);
 }
    , 0);
 }
}
 const actions = {
 addToCart({
 state, commit }
, product) {
     if (product.inventory >
 0) {
      let productItem = state.addedList.find(item =>
     item.id === product.id);
  if (productItem) {
      commit('increamentItemQuantity', productItem);
  }
 else {
      commit('pushItemToCart', product);
  }
  commit('products/decreamentInventory', product, {
 root: true }
    );
 }
 }
}
 const mutations = {
 // 增加购物车中同等商品的数量 increamentItemQuantity(state, {
 id }
) {
     let productItem = state.addedList.find(item =>
     item.id === id);
     productItem.quantity ++;
 }
, // 将商品加入购物车 pushItemToCart(state, {
 id }
) {
 state.addedList.push({
  id,  quantity: 1 }
) }
, }
 export default {
 namespaced: true, state, getters, actions, mutations}
    

store/index.js

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

main.js

import Vue from "vue";
    import App from "@/components/App.vue";
    import store from "@/store";
     Vue.config.productionTip = false;
 new Vue({
     store, render: h =>
 h(App)}
    ).$mount("#app");
    

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

• 基于vuex实现购物车功能
• Vuex实现购物车小功能
• vuex实现购物车的增加减少移除
• vuex实现购物车功能
• 使用vuex较为优雅的实现一个购物车功能的示例代码
• vuex实现的简单购物车功能示例
• 用vuex写了一个购物车H5页面的示例代码
• vuex实现简单的购物车功能

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