利用Vuex怎么实现一个购物车功能-创新互联
利用Vuex怎么实现一个购物车功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联公司专注于本溪网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供本溪营销型网站建设,本溪网站制作、本溪网页设计、本溪网站官网定制、小程序开发服务,打造本溪网络公司原创品牌,更为您提供本溪网站排名全网营销落地服务。文件结构
App.vue
Shopping Cart Demo
Products:
My Cart
Products.vue
- {{ item.title }} - {{ item.price }} 库存: {{ item.inventory }}
ShoppingCart.vue
- {{ item.title }} *{{ item.quantity }}
total: {{ total }}
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怎么实现一个购物车功能-创新互联
文章位置:http://myzitong.com/article/dscsij.html