Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "vuex how to achieve simple shopping cart function", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "vuex how to achieve simple shopping cart function" article.

The file directory is as follows:

Shopping cart component

Vuex-shopCart selected goods import shoList from ". / shop-list" import shopCart from ". / shop-cart" export default {name: "shop", components: {"shop-list": shoList, "shop-cart": shopCart}}

Commodity list

Id name Price Action {{item.id}} {{item.name}} {{item.price}} add to the shopping cart Import {mapGetters MapActions} from "vuex" Export default {name: "shopList", computed: {... mapGetters ({shopList: "getShopList",})}, methods: {. MapActions (["addToCart"])},}

Select the list of items

Id name price quantity operation {{item.id}} {{item.name}} {{item.price}} {{item.num}} Delete the total number of data not available: {{totalNum}} Total Price: {{totalPrice}} empty shopping cart import {mapGetters MapActions} from "vuex" export default {name: "shopCart", data () {return {}}, computed: {... mapGetters ({cartData: "addShopList", totalNum: "totalNum", totalPrice: "totalPrice"})} Methods: {... mapActions ({clearCart: "clearToCart", deleteShop: "deletToShop"})}}

Vuex creation

Npm install vuex-- save, create the vuex folder, create store.js in the folder, and introduce vuex

Store.js

Import Vue from "vue" import Vuex from "vuex" import cart from ". / modules/cart" Vue.use (Vuex) export default new Vuex.Store ({modules: {cart}})

Create a module folder modules, which is created as a store module, and then output by default, introduced in store.js

Cart.js

Const state = {shop_list: [{id: 11, name: "Yu-Shiang Shredded Pork", price: 12}, {id: 22, name: "Kung Pao Chicken", price: 14}, {id: 34, name: "shredded potatoes", price: 10} {id: 47, name: "Rice", price: 2}, {id: 49, name: "the number of ants", price: 13}, {id: 50, name: "fried garlic bolts with bacon", price: 15}] Add: []} const getters = {/ / get product list getShopList: state = > state.shop_list, / / get shopping cart list addShopList: state = > {/ / map () method returns a new array The element in the array is the value of the original array element after function call return state.add.map (({id, num}) = > {let product = state.shop_list.find (n = > n.id = = id) / / find () method returns the value of the first element of the array that passes the test (judged within the function) If there is no eligible element, return undefined if (product) {/ / if the commodity return {/ / return object... product, num})}, / / get the total quantity totalNum: (state) Getters) = > {let total = 0 getters.addShopList.map (n = > {total + = n.num}) return total}, / / calculate the total price totalPrice: (state, getters) = > {let total = 0 getters.addShopList.map (n = > {total + = n.num * n.price}) return total}} Const actions = {/ / add shopping cart addToCart ({commit}, product) {commit ("addCart", {id: product.id})}, / / empty shopping cart clearToCart ({commit}) {commit ("clearCart")}, / / delete individual item deletToShop ({commit}, product) {commit ("deletShop") Product)}} const mutations = {/ / add shopping cart addCart (state, {id}) {let record = state.add.find (n = > n.id = = id) if (! record) {/ / if the item state.add.push ({/ / additional item id) does not exist in the shopping cart Num: 1})} else {/ / if the item has been added to the shopping cart Then change the quantity record.num++}}, / / delete a single item deletShop (state, product) {state.add.forEach ((item,i) = > {if (item.id = = product.id) {/ / if the item is found state.add.splice (iMetro 1)}})})} / / empty shopping cart clearCart (state) {state.add = []} export default {state, getters, actions, mutations}

The above is the content of this article on "how to achieve simple shopping cart functions in vuex". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.