<!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. 详解 HTML5 中的 WebSocket 及实例代码-做弹幕

    原文链接:http://www.php.cn/html5-tutorial-363345.html

  2. 20145106 java 实验四

    这次的实验是Android开发实验基础.Android开发是一个很大的工程,但是这次只是一个小小的入门. 首先将SDK文件复制到-根目录下,之后将Android Studio复制到电脑里. 并指明SD ...

  3. VC++实现程序重启的方法(转载)

    转载:http://blog.csdn.net/clever101/article/details/9327597 很多时候系统有很多配置项,修改了配置项之后能有一个按钮实现系统重启.所谓重启就是杀死 ...

  4. Windows下卸载软件时提示 等待先前的卸载完成？ 终止 dllhost.exe 进程

    只要结束进程中的 "dllhost" 进程就好了. 估计原因是, 当卸载某些 "所谓的"较大型的软件的时候, 要去更新, 更改系统对dll链接库的注册, 更新. ...

  5. 【第十四章】 springboot + profile（不同环境读取不同配置）

    具体做法: 不同环境的配置设置一个配置文件,例如:dev环境下的配置配置在application-dev.properties中:prod环境下的配置配置在application-prod.prope ...

  6. Luogu P1533 可怜的狗狗

    题目链接:https://www.luogu.org/problemnew/show/P1533 没人写$fhq\ treap$做法,那我就补一篇qwq 看到这题第一时间想主席树,然后发现我还没学主席 ...

  7. shiro的简单入门使用

    这里只是测试登录认证,没有web模块,没有连接数据库,用户密码放在shiro.ini配置中,密码没有加密处理,简单入门. 基于maven 先看目录结构 测试结果 pom.xml <?xml ve ...

  8. bam/sam格式说明--转载

    在SAM输出的结果中每一行都包括十二项通过Tab分隔,从左到右分别是: 1 序列的名字(Read的名字) 2 概括出一个合适的标记,各个数字分别代表 1     序列是一对序列中的一个 2     比 ...

  9. WPF基础学习笔记整理 （九） 资源

    基础知识: WPF的资源是一种保管一系列有用对象的简单方法,方便于重用. WPF UI元素的Resources属性,都是继承自FrameworkElement列,且其类型为ResourceDictio ...

  10. python input输入元素相加

    sum= number= while True: : break number=int(input('数字0为结束程序,请输入数字: ')) sum+=number print('目前累加的结果为: ...