<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vuex之使用actions和axios异步初始购物车数据</title>

    <script src="vue.js"></script>

    <script src="vuex.js"></script>

    <script src="node_modules/axios/dist/axios.js"></script>

</head>

<body>

<div id="demo">

    <footer-cart></footer-cart>

    <Lists></Lists>

</div>

<script type="text/x-template" id="Lists">

    <div>

        <h1 v-if="goods.length==0">

            购物车中没有商品

            <a href="">去购物吧</a>

        </h1>

        <div v-if="goods.length>0">

            <table border="1">

                <tr>

                    <th>编号</th>

                    <th>名称</th>

                    <th>价格</th>

                    <th>数量</th>

                    <th>总计</th>

                    <th>操作</th>

                </tr>

                <tr v-for="v in goods">

                    <td>{{v.id}}</td>

                    <td>{{v.title}}</td>

                    <td>{{v.price}}</td>

                    <td>

                        <input type="text" v-model="v.num">

                    </td>

                    <td>{{v.totalPrice}}</td>

                    <td>

                        <button @click="del(v.id)">删除</button>

                    </td>

                </tr>

            </table>

        </div>

    </div>

</script>

<script type="text/x-template" id="footerCart">

    <div v-if="totalPrice>0">

        <div>

            总计：{{totalPrice}}

        </div>

    </div>

</script>

<script>

    let Lists = {

        template: "#Lists",

        computed: {

            goods() {

                return this.$store.getters.goods;

            }

        },

        methods: {

            del(id) {

                this.$store.commit('del', {id})

            }

        }

    }

    let footerCart = {

        template: "#footerCart",

        computed: {

            totalPrice() {

                return this.$store.getters.totalPrice;

            }

        }

    }

    let store = new Vuex.Store({

        state: {

            goods: []

        },

        getters: {

            //获取商品总价：

            totalPrice: state => {

                let totalPrice = 0;

                state.goods.forEach((v) => {

                    totalPrice += v.num * v.price;

                });

                return totalPrice;

            },

            goods(state) {

                let goods = state.goods;

                goods.forEach((v) => {

                    v.totalPrice = v.num * v.price;

                })

                return goods;

            }

        },

        mutations: {

            //删除购物车中的商品

            del(state, param) {

                let k;

                for (let i = 0; i < state.goods.length; i++) {

                    if (state.goods[i].id == param.id) {

                        k = i;

                        break;

                    }

                }

                state.goods.splice(k, 1);

            },

            setGoods(state, param) {

                state.goods = param.goods;

            }

        },

        actions: {

            loadGoods(store) {

                axios.get('073.php').then(function (response) {

                    store.commit('setGoods', {goods: response.data})

                    //console.log(response);

                })

            }

        }

    });

    var app = new Vue({

        el: "#demo",

        store,

        components: {

            Lists, footerCart

        },

        mounted() {

            this.$store.dispatch('loadGoods');

        }

    });

</script>

</body>

</html>

　　073.php代码：

<?php

$data = [

    ['id' => 1, 'title' => 'ihpone7', 'price' => 100, 'num' => 3],

    ['id' => 2, 'title' => 'ihpone8', 'price' => 200, 'num' => 4],

];

echo json_encode($data);

?>

　　

073——VUE中vuex之使用actions和axios异步初始购物车数据的更多相关文章

  1. 071——VUE中vuex之使用getters计算每一件购物车中商品的总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 070——VUE中vuex之使用getters计算每一件购物车中商品的总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue中Vuex的详解与使用(简洁易懂的入门小实例)

    怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...

  4. vue中vuex的五个属性和基本用法

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...

  5. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  6. 074——VUE中vuex之模块化modules开发实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 072——VUE中vuex之使用mutations修改购物车仓库数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 069——VUE中vuex之使用getters高效获取购物车商品总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 068——VUE中vuex的使用场景分析与state购物车实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 认识电脑的开机流程与主引导分区（MBR）

    在前篇随笔中,已经谈到了CMOS与BIOS,CMOS是记录各项硬件参数(包括系统时间.设备的I/O地址.CPU的电压和频率等)且嵌入到主板上面的存储器,BIOS是一个写入到主板上的韧体(韧体是写入到硬 ...

  2. java Request 获得用户IP地址

    public static String getIpAddress(HttpServletRequest request) { String ip = request.getHeader(" ...

  3. C#中dll附加配置文件

    DLL-with-configuration-file带配置文件的dll http://www.codeproject.com/Tips/199441/DLL-with-configuration-f ...

  4. 【第三十九章】 微服务CICD（1）- gitlab搭建与使用（docker版）

    一.下载docker镜像 前提:docker引擎已经安装好. docker pull gitlab/gitlab-ce gitlab是8.13.1版本. 二.启动应用 docker run -d -h ...

  5. html5标签 H5标签

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. js delete可以删除对象属性及变量

    ,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete o ...

  7. 【Python】【元编程】【从协议到抽象基类】

    """class Vector2d: typecode = 'd' def __init__(self,x,y): self.__x = float(x) self.__ ...

  8. Linux——bash应用技巧简单学习笔记

    本人是看的lamp兄弟连的视频,学习的知识做一下简单,如有错误尽情拍砖. 命令补齐 命令补齐允许用户输入文件名起始的若干个字 母后,按<Tab>键补齐文件名. 命令历史 命令历史允许用户浏 ...

  9. sublime text3 (Mac) 快捷键

    符号说明 符号 说明 ⌘ command ⌃ control ⌥ option ⇧ shift ↩ enter ⌫ delete 打开/关闭/前往 快捷键 功能 ⌘⇧N 打开一个新的sublime窗口 ...

  10. 转载：RESTful API 设计指南

    http://www.ruanyifeng.com/blog/2014/05/restful_api.html 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板. ...