<!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. fiddler配置及使用教程

    本文基于Fiddler4讲解基本使用 fiddler抓包原理 注意:Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888.当Fiddler退出的时候它会 ...

  2. C++ compile Microsoft Visual C++ Static and Dynamic Libraries

    出处:http://www.codeproject.com/Articles/85391/Microsoft-Visual-C-Static-and-Dynamic-Libraries 出处:http ...

  3. Delphi XE5 for Android （六）

    今天尝试了TTabControl的使用.在很多Android的app中,首次启动时都使用选项卡模式进行产品介绍,用户通过向左滑动,改变选项卡.在xe5下这项工作由TTabControl控件完成,如下图 ...

  4. Slf4j+LogBack使用参考

    博文参考: 最简例子:https://blog.csdn.net/johnson_moon/article/details/77532583 Web中配置:https://blog.csdn.net/ ...

  5. 【基础配置】Dubbo的配置及使用

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  6. Unity3D学习笔记（八）：四元素和书籍推荐

    书籍推荐: 3D数学基础:图形与游戏开发——游戏软件开发专家系列(美)邓恩 Unity Shader入门精要 冯乐乐(92年) 数据结构(Python语言描述) 数据结构.算法与应用(C++语言描述) ...

  7. 使用Apache Kylin搭建企业级开源大数据分析平台

    转:http://www.thebigdata.cn/JieJueFangAn/30143.html 我先做一个简单介绍我叫史少锋,我曾经在IBM.eBay做过大数据.云架构的开发,现在是Kylige ...

  8. Python的替换函数——replace()，strip(),和re.sub()

    在Python中常用的三个"替换"函数是strip(),replace()和re.sub(),下面来讲讲这三个函数的用法. 一.replace() 基本用法:对象.replace( ...

  9. C#在服务端验证客户端证书（Certificate）

    使用https协议进行通讯的时候可以设置双向证书认证,客户端验证服务端证书的方法前面已经介绍过了,现在说一下在服务端验证客户端证书的方案. 这里给出的方案比较简单,只需要在Service端的配置文件中 ...

  10. python 集合清空

    setp = set(["Red", "Green"]) setq = setp.copy() print(setq) setp.clear() print(s ...