VUE应用:分享简单购物车功能的实例。废话不多说,直接上干货。
- <template>
- <div>
- <h1>vuex-shopCart</h1>
- <div class="shop-listbox">
- <shop-list />
- </div>
- <h2>已选商品</h2>
- <div class="shop-cartbox">
- <shop-cart />
- </div>
- </div>
- </template>
- <script>
- import shoList from './shop-list'
- import shopCart from './shop-cart'
- export default {
- name: 'shop',
- components: {
- 'shop-list' : shoList,
- 'shop-cart' : shopCart
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- </style>
商品列表:
- <template>
- <div class="shop-list">
- <table>
- <tr class="shop-listtitle">
- <td>id</td>
- <td>名称</td>
- <td>价格</td>
- <td>操作</td>
- </tr>
- <tr v-for = "item in shopList" class="shop-listinfo" :key="item.id">
- <td>{{item.id}}</td>
- <td>{{item.name}}</td>
- <td>{{item.price}}</td>
- <td>
- <button @click="addToCart(item)">加入购物车</button>
- </td>
- </tr>
- </table>
- </div>
- </template>
- <script>
- import {mapGetters,mapActions} from "vuex";
- export default {
- name : 'shopList',
- computed: {
- ...mapGetters({
- shopList:'getShopList',
- })
- },
- methods: {
- ...mapActions(['addToCart'])
- },
- }
- </script>
选中商品列表:
- <template>
- <div class="shop-list">
- <table>
- <tr class="shop-listtitle">
- <td>id</td>
- <td>名称</td>
- <td>价格</td>
- <td>数量</td>
- <td>操作</td>
- </tr>
- <tr v-for="item in cartData" class="shop-listinfo" :key="item.id">
- <td>{{item.id}}</td>
- <td>{{item.name}}</td>
- <td>{{item.price}}</td>
- <td>{{item.num}}</td>
- <td><button class="shop-dele dele-btn" @click="deleteShop(item)">删除</button></td>
- </tr>
- <tr v-if="cartData.length <= 0">
- <td colspan="5">暂无数据</td>
- </tr>
- <tr>
- <td colspan="2">总数:{{totalNum}}</td>
- <td colspan="2">总价格:{{totalPrice}}</td>
- <td><button class="dele-cart dele-btn" @click="clearCart">清空购物车</button></td>
- </tr>
- </table>
- </div>
- </template>
- <script>
- 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"
- })
- }
- }
- </script>
vuex 创建
npm install vuex --save,创建vuex文件夹,在文件夹中创建store.js,引入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
- }
- })
建立一个模块文件夹modules,里面创建创建当个store模块,然后默认输出,在store.js中引入;
cart.js
- const state = {
- shop_list: [{
- id: 11,
- name: '鱼香肉丝',
- price : 12
- }, {
- id: 22,
- name: '宫保鸡丁',
- price : 14
- }, {
- id: 34,
- name: '土豆丝',
- price : 10
- }, {
- id: 47,
- name: '米饭',
- price : 2
- }, {
- id: 49,
- name: '蚂蚁上数',
- price : 13
- }, {
- id: 50,
- name: '腊肉炒蒜薹',
- price : 15
- }],
- add : []
- }
- const getters = {
- // 获取商品列表
- getShopList: state => state.shop_list,
- // 获取购物车列表
- addShopList: state => {
- // map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
- return state.add.map(({ id, num }) => {
- let product = state.shop_list.find(n => n.id == id)// find()方法返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的元素返回undefined
- if (product) {// 如果存在该商品
- return {// 返回对象
- ...product,
- num
- }
- }
- })
- },
- // 获取总数量
- totalNum: (state, getters) => {
- let total = 0
- getters.addShopList.map(n => {
- total += n.num
- })
- return total
- },
- // 计算总价格
- totalPrice: (state, getters) => {
- let total = 0
- getters.addShopList.map(n => {
- total += n.num * n.price
- })
- return total
- }
- },
- const actions = {
- // 加入购物车
- addToCart({ commit},product) {
- commit('addCart', {
- id : product.id
- })
- },
- // 清空购物车
- clearToCart({ commit}) {
- commit('clearCart')
- },
- // 删除单个物品
- deletToShop({ commit},product) {
- commit('deletShop',product)
- }
- }
- const mutations = {
- // 加入购物车
- addCart(state, { id}){
- let record = state.add.find(n => n.id == id)
- if (!record) {// 如果购物车中不存在该商品
- state.add.push({// 追加商品
- id,
- num : 1
- })
- } else { // 如果商品已经加入购物车,则改变数量
- record.num++
- }
- },
- // 删除单个物品
- deletShop(state, product) {
- state.add.forEach((item,i) => {
- if (item.id == product.id) {// 如果找到该商品
- state.add.splice(i,1)
- }
- })
- },
- // 清空购物车
- clearCart(state) {
- state.add = []
- }
- }
- export default {
- state,
- getters,
- actions,
- mutations
- }
网友评论文明上网理性发言 已有0人参与
发表评论: