• 售前

  • 售后

热门帖子
入门百科

Vuex实现简单购物车

[复制链接]
无奈的剑侠站 显示全部楼层 发表于 2021-10-25 19:29:58 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了Vuex实现简单购物车的详细代码,供大家参考,详细内容如下
文件布局

App.vue
  1. <template>
  2. <div id="app">
  3. <h3>Shopping Cart Demo</h3>
  4. <hr>
  5. <h4>Products:</h4>
  6. <ProductList />
  7. <hr>
  8. <h4>My Cart</h4>
  9. <ShoppingCart />
  10. </div>
  11. </template>
  12. <script>
  13. import ProductList from '@/components/ProductList';
  14. import ShoppingCart from '@/components/ShoppingCart';
  15. export default {
  16. components: {
  17. ProductList,
  18. ShoppingCart
  19. }
  20. }
  21. </script>
复制代码
Products.vue
  1. <template>
  2. <div>
  3.   <ul v-for="item in products" :key="item.id">
  4.   <li>
  5.    {{ item.title }} - {{ item.price }} &nbsp;&nbsp; 库存: {{ item.inventory }}<br>
  6.    <button :disabled="!item.inventory" @click="addToCart(item)">add to cart</button>
  7.   </li>
  8.   </ul>
  9. </div>
  10. </template>
  11. <script>
  12. import { mapGetters, mapActions } from 'vuex';
  13. export default {
  14. computed: {
  15. // ...mapGetters('products',{
  16. // products: 'allProducts'
  17. // })
  18. ...mapGetters({
  19.   products: 'products/allProducts'
  20. })
  21. },
  22. methods: {
  23. ...mapActions('cart',['addToCart'])
  24. },
  25. created() {
  26. this.$store.dispatch('products/getAllProducts');
  27. }
  28. }
  29. </script>
复制代码
ShoppingCart.vue
  1. <template>
  2. <div>
  3. <ul v-for="item in products" :key="item.id">
  4.   <li>{{ item.title }} *{{ item.quantity }}</li>
  5. </ul>
  6. <div>total: {{ total }}</div>
  7. </div>
  8. </template>
  9. <script>
  10. import { mapGetters } from 'vuex';
  11. export default {
  12. computed: {
  13. ...mapGetters('cart', {
  14.   products: 'cartProducts',
  15.   total: 'cartTotalPrice'
  16. })
  17. }
  18. }
  19. </script>
复制代码
modules/products.js
  1. import api from '../../api';
  2. const state = {
  3. all: []
  4. }
  5. const getters = {
  6. allProducts: state => state.all
  7. }
  8. const actions = {
  9. // 获取初始商品数据
  10. getAllProducts({ commit }) {
  11. api.getProducts(products => commit('setProducts', products));
  12. }
  13. }
  14. const mutations = {
  15. setProducts(state, products) {
  16. state.all = products;
  17. },
  18. // 减少该商品库存
  19. decreamentInventory(state, { id }) {
  20. let productItem = state.all.find(item => item.id === id);
  21. productItem.inventory --;
  22. }
  23. }
  24. export default {
  25. namespaced: true,
  26. state,
  27. getters,
  28. actions,
  29. mutations
  30. }
复制代码
modules/cart.js
  1. const state = {
  2. addedList: []
  3. }
  4. const getters = {
  5. cartProducts(state, getters, rootState) {
  6. return state.addedList.map((item, index) => {
  7.   let productItem = rootState.products.all.find(product => product.id === item.id);
  8.   return {
  9.   title: productItem.title,
  10.   price: productItem.price,
  11.   quantity: item.quantity
  12.   }
  13. })
  14. },
  15. cartTotalPrice(state, getters) {
  16. return getters.cartProducts.reduce((total, product) => {
  17.   return total + (product.price * product.quantity);
  18. }, 0);
  19. }
  20. }
  21. const actions = {
  22. addToCart({ state, commit }, product) {
  23. if (product.inventory > 0) {
  24.   let productItem = state.addedList.find(item => item.id === product.id);
  25.   if (productItem) {
  26.   commit('increamentItemQuantity', productItem);
  27.   } else {
  28.   commit('pushItemToCart', product);
  29.   }
  30.   commit('products/decreamentInventory', product, { root: true });
  31. }
  32. }
  33. }
  34. const mutations = {
  35. // 增加购物车中同等商品的数量
  36. increamentItemQuantity(state, { id }) {
  37. let productItem = state.addedList.find(item => item.id === id);
  38. productItem.quantity ++;
  39. },
  40. // 将商品加入购物车
  41. pushItemToCart(state, { id }) {
  42. state.addedList.push({
  43.   id,
  44.   quantity: 1
  45. })
  46. },
  47. }
  48. export default {
  49. namespaced: true,
  50. state,
  51. getters,
  52. actions,
  53. mutations
  54. }
复制代码
store/index.js
  1. import Vue from 'vue';
  2. import Vuex from 'vuex';
  3. import cart from './modules/cart';
  4. import products from './modules/products';
  5. Vue.use(Vuex);
  6. export default new Vuex.Store({
  7. modules: {
  8. cart,
  9. products
  10. }
  11. });
复制代码
main.js
  1. import Vue from "vue";
  2. import App from "@/components/App.vue";
  3. import store from "@/store";
  4. Vue.config.productionTip = false;
  5. new Vue({
  6. store,
  7. render: h => h(App)
  8. }).$mount("#app");
复制代码
以上就是本文的全部内容,渴望对大家的学习有所资助,也渴望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作