Vue入门之Vuex实战

引言

Vue组件化做的确实非常彻底，它独有的vue单文件组件也是做的非常有特色。组件化的同时带来的是：组件之间的数据共享和通信的难题。 尤其Vue组件设计的就是，父组件通过子组件的prop进行传递数据，而且数据传递是单向的。也就是说：父组件可以把数据传递给子组件，但是 反之则不同。如下图所示：

单向数据流动

单方向的数据流动带来了非常简洁和清晰的数据流，纯展示性或者独立性较强的模块的开发确实非常方便和省事。 但是复杂的页面逻辑，组件之间的数据共享处理就会需要通过事件总线的方式解决或者使用Vue的Vuex框架了

子组件通知父组件数据更新：事件方式的实现

子组件可以在子组件内触发事件，然后在父容器中添加子组件时绑定父容器的方法为事件响应方法的方式.如下图所示

  • 使用 v-on 绑定自定义事件
  • //每个 Vue 实例都实现了事件接口(Events interface)，即：
//使用 $on(eventName) 监听事件
//使用 $emit(eventName) 触发事件
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue入门之event message</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <p>推荐次数：{{ voteCount }}</p>
    <hr>
    <!--绑定两个自定义事件，当组件内部触发了事件后，会自定调用父容器绑定的methods的方法，达到了子容器向父容器数据进行通信同步的方法-->
    <vote-btn v-on:vote="voteAction" v-on:sendmsg="sendMsgAction"></vote-btn>
    <hr>
    <ul class="list-group">
      <li v-for="o in msg" class="list-group-item">{{o}}</li>
    </ul>
  </div>
  <script>
    Vue.component(‘vote-btn‘, {
      template: `
        <div>
          <button class="btn btn-success" v-on:click="voteArticle">推荐</button>
          <hr/>
          <input type="text" v-model="txtMsg" />
          <button v-on:click="sendMsg" class="btn btn-success">发送消息</button>
        </div>
      `,
      data: function () {
        return {
          txtMsg: ""
        }
      },
      methods: {
        voteArticle: function () {
          // 触发事件，vote
          this.$emit(‘vote‘)
        },
        sendMsg: function () {
          // 触发事件，sendmsg，并
          this.$emit(‘sendmsg‘, this.txtMsg)
        }
      }
    })

    var app = new Vue({
      el: ‘#app‘,
      data: {
        voteCount: 0,
        msg: []
      },
      methods: {
        voteAction: function() {  // 事件触发后，会直接执行此方法
          this.voteCount += 1
        },
        sendMsgAction: function (item) {
          this.msg.push(item)
        }
      }
    });
  </script>
</body>

</html>

如果非父子组件怎么通过事件进行同步数据，或者同步消息呢？Vue中的事件触发和监听都是跟一个具体的Vue实例挂钩。 所以在不同的Vue实例中想进行事件的统一跟踪和触发，那就需要一个公共的Vue实例，这个实例就是公共的事件对象。

参考下面做的一个购物车的案例的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue入门之event message</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <product-list :products="products" v-on:addpro="addToCarts"> </product-list>
    <hr>
    <cart :cart-products="carts"> </cart>
  </div>
  <script>
    var eventBus = new Vue()

    Vue.component(‘cart‘, {
      template: `
      <table class="table table-borderd table-striped table-hover">
      <thead>
        <tr>
          <th>商品编号</th>
          <th>商品名</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cartProducts">

          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            {{ item.count }}
          </td>
          <td>
            <button type="button" @click="removeCarts(item)" class="btn btn-success"><i class="glyphicon glyphicon-remove"></i></button>
          </td>
        </tr>
      </tbody>
    </table>
      `,
      data: function () {
        return {
        }
      },
      methods: {
        removeCarts: function (item) {
          eventBus.$emit(‘remo‘, item)
        }
      },
      props: [‘cartProducts‘]
    })

    Vue.component(‘product-list‘, {
      template: `
      <table class="table table-borderd table-striped table-hover">
      <thead>
        <tr>
          <th>商品编号</th>
          <th>商品名</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in products">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <button type="button" v-on:click="addToCarts(item)" class="btn btn-success"><i class="glyphicon glyphicon-shopping-cart"></i></button>
          </td>
        </tr>
      </tbody>
    </table>
      `,
      data: function () {
        return {
        }
      },
      methods: {
        addToCarts: function (item) {
          this.$emit(‘addpro‘, item)
        }
      },
      props: [‘products‘],

    })

    var app = new Vue({
      el: ‘#app‘,
      data: {
        products: [
          { id: ‘1‘, name: ‘鳄鱼‘ },
          { id: ‘2‘, name: ‘蛇‘ },
          { id: ‘3‘, name: ‘兔子‘ },
          { id: ‘4‘, name: ‘驴‘ },
          { id: ‘5‘, name: ‘孔雀‘ }
        ],
        carts: []
      },
      methods: {
        addToCarts: function (item) {
          var isExist = false
          for(var i=0; i<this.carts.length; i++) {
            if( item.id === this.carts[i].id ) {
              item.count = this.carts[i].count + 1
              Vue.set(this.carts, i, item)
              isExist = true
            }
          }
          !isExist && (item.count = 1, this.carts.push(item))
        },
        removeCarts: function (item) {
          for(var i =0; i<this.carts.length; i++) {
            if( item.id === this.carts[i].id) {
              this.carts.splice(i,1)
            }
          }
        }
      },
      mounted: function () {
        self = this;
        eventBus.$on(‘remo‘, function (item) {
          self.removeCarts(item)
        })
      }
    });
  </script>
</body>

</html>

Vuex解决复杂单页面应用

上面的方式只能解决一些简单的页面中的组件的通信问题，但是如果是复杂的单页面应用就需要使用更强大的Vuex来帮我们进行状态的统一管理和同步。

当第一次接触Vuex的时候，眼前一亮，之前经过Redux之后，被它繁琐的使用令我痛苦不已，虽然思路很清晰，其实完全可以设计的更简单和高效。 当我接触到Vuex之后，发现这就是我想要的。的确简洁就是一种艺术。

其实本质上，Vuex就是一个大的EventBus对象的升级版本，相当于一个特定的仓库，所有数据都在统一的仓库中，进行统一的管理。

几个核心的概念：

  • State： Vuex仓库中的数据。
  • Getter： 类似于Vue实例中的计算属性，Getter就是普通的获取state包装函数。
  • Mutations: Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
  • Action: action可以触发Mutations，不能直接改变state。

看下面一张图了解一下Vuex整体的数据流动：

Vuex实例demo

可能前面的图和概念都太多了，先看一个例子，简单了解一下Vuex中的仓库的数据 怎么整合到 Vue的实例中去。

创建Vuexdemo的项目

时间： 2024-12-21 14:23:20

Vue入门之Vuex实战的相关文章

Vue入门系列（五）Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp

parcel+vue入门

一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Parcel 可以使用任何类型的文件作为入口,但是最好还是使用 HTML 或 JavaScript 文件.如果在 HTML 中使用相对路径引入主要的 JavaScript 文件,Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址. 接下来,创建一个 index.html 和 ind

Vue入门篇

一  ES6语法 1  ECMAScript 1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言. 1996年,微软发布了JScript,其实是JavaScript的逆向工程实现. 1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript标准规范.JavaScript和JScript都是ECMAScript的标准实现者,随后各大浏览器厂商纷纷实现了ECMAScript标准.

Spark从入门到上手实战

Spark从入门到上手实战 课程学习地址:http://www.xuetuwuyou.com/course/186 课程出自学途无忧网:http://www.xuetuwuyou.com 讲师:轩宇老师 课程简介: Spark属于新起的基于内存处理海量数据的框架,由于其快速被众公司所青睐.Spark 生态栈框架,非常的强大,可以对数据进行批处理.流式处理.SQL 交互式处理及机器学习和Graphx 图像计算.目前绝大数公司都使用,主要在于 Spark SQL 结构化数据的处理,非常的快速,高性能

跟风舞烟学大数据可视化－Echarts从入门到上手实战

跟风舞烟学大数据可视化-Echarts从入门到上手实战 课程观看地址:http://www.xuetuwuyou.com/course/180 课程出自学途无忧网:http://www.xuetuwuyou.com 课程讲师:风舞烟 课时数:三个模块,共70课时   一.课程特色: 1.最全的Echarts课程讲解     70学时课时量,360度全方位,无死角的课程设计,让你通透Echarts可视化技术 2.最适合小白学员学习的课程,没有之一     只要你了解一点基本的Html,CSS,Ja

Systemd 入门教程：实战篇

Systemd 入门教程:实战篇 上一篇文章,介绍了 Systemd 的主要命令,这篇文章主要介绍如何使用 Systemd 来管理我们的服务,以及各项的含义: 一.开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件,如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例). $ sudo systemctl enable httpd 上面的命令相当于在/etc/systemd/system目

vue入门(二)----模板与计算属性

其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. 首先我们说一下模板,其实如果看过第一节vue入门----组件,我们会知道更好更科学的办法是通过创建组件的方式,这种方式允许我们任意进行组件的嵌套.而通过模板的方式的话,个人觉得效果并没有组件好.行,开始切入正题,现在我们首先通过一下几点来进行学习(其实是按照官网的顺序记录自己不懂的知识点). 1.

Linux 命令详解（八）Systemd 入门教程：实战篇

Systemd 入门教程:实战篇 http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-part-two.html

Java 入门课程视频实战-0基础 上线了，猜拳游戏，ATM实战，欢迎围观

Java 入门课程视频实战-0基础 已经上传完了.欢迎小伙伴们过来围观 直接进入: http://edu.csdn.net/course/detail/196 课程文件夹例如以下: 1 初识Java  19:08 2 熟悉Eclipse开发工具  12:42 3 Java语言基础  17:39 4 流程控制  14:53 5 数组  14:44 6 字符串  34:32 7 类和对象  29:30 8 猜拳游戏  33:39 9 模拟银行柜员机程序  36:35 10 退休金结算程序  本课程由