<!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. mysql免安装版本（用批处理安装和启动）

    参考文章: http://www.cnblogs.com/niuniutry/p/3555778.html http://wenku.baidu.com/link?url=WI9Cyl5AMHOlps ...

  2. mysql删除sql表添加别名及删除sql的注意事项

    本文为博主原创,未经允许不得转载: 根据平常的习惯,个人会将操作的表后面添加一个别名,无论是使用还是不使用的时候,均是为了 修改还是扩展sql的时候更加安全,方便,快捷. 今天在写删除的sql时,对表 ...

  3. Web前端代码规范

    新增:http://materliu.github.io/code-guide/#project-naming HTML 原则1.规范 .保证您的代码规范,保证结构表现行为相互分离.2.简洁.保证代码 ...

  4. NOI 8467 鸣人的影分身

    http://noi.openjudge.cn/ch0206/8467/ 描述 在火影忍者的世界里,令敌人捉摸不透是非常关键的.我们的主角漩涡鸣人所拥有的一个招数——多重影分身之术——就是一个很好的例 ...

  5. UVa 1471 防线

    https://vjudge.net/problem/UVA-1471 题意:给出一个序列,删除一个连续子序列,使得剩下的序列中有一个长度最大的连续递增子序列,输出个数. 思路:首先可以计算出以i结尾 ...

  6. UVa 11212 编辑书稿（dfs+IDA*）

    https://vjudge.net/problem/UVA-11212 题意:给出n个自然段组成的文章,将他们排列成1,2...,n.每次只能剪切一段连续的自然段,粘贴时按照顺序粘贴. 思路:状态空 ...

  7. github+hexo搭建博客

    引言     之前用阿里云弹性web托管采用wordpress搭建的个人博客,经过我使用一段时间之后发现存在很多问题: 网站的响应速度非常慢,估计打开主页需要3-4s的时间,我经过搜索发现很多人都有这 ...

  8. Hibernate 由实体类与配置文件的配置关系生成数据库中的表

    import org.hibernate.cfg.Configuration; import org.hibernate.tool.hbm2ddl.SchemaExport; public class ...

  9. Windows 上安装 MySQL

    Windows 上安装 MySQL https://www.mysql.com/downloads/ 1.下载MySQL安装包(官网下载链接): 选择 DOWNLOADS ——> Communi ...

  10. Java8 新特性之默认接口方法

    摘要: 从java8开始,接口不只是一个只能声明方法的地方,我们还可以在声明方法时,给方法一个默认的实现,我们称之为默认接口方法,这样所有实现该接口的子类都可以持有该方法的默认实现. · 待定 一. ...