为什么要使用Vuex的介绍


Posted in Javascript onJanuary 19, 2019

单向数据流

以下是一个表示“单向数据流”理念的极简示意:

但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • - 多个视图依赖于同一状态。
  • - 来自不同视图的行为需要变更同一状态。

对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。

对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想,借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

什么情况下应该使用 Vuex?

虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜:您自会知道什么时候需要它。

如果没有使用Vuex

假设有这样的两个页面,数据一样,就是页面布局不一样:

为什么要使用Vuex的介绍

为什么要使用Vuex的介绍

代码

Page1.vue

<template>
  <div>
    <h2>我是第一个页面</h2>
    <ul class="ul_list">
      <li v-for="item in items">
        <p class="name">商品:{{item.name}}</p>
        <p class="price">价格:¥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
        items: [
          {
            name: '赣州橙子',
            price: '8.8'
          },
          {
            name: '新疆哈密瓜',
            price: '2.0'
          },
          {
            name: '山东大枣',
            price: '3.2'
          },
          {
            name: '阳澄湖大闸蟹',
            price: '10.0'
          }
        ]
    }
   },
  }
</script>

Page2.vue

<template>
  <div>
    <h2>我是第二个页面</h2>
    <ul class="ul_list page2">
      <li v-for="item in items">
        <p class="name">商品:{{item.name}}</p>
        <p class="price">价格:¥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
        items: [
          {
            name: '赣州橙子',
            price: '8.8'
          },
          {
            name: '新疆哈密瓜',
            price: '2.0'
          },
          {
            name: '山东大枣',
            price: '3.2'
          },
          {
            name: '阳澄湖大闸蟹',
            price: '10.0'
          }
        ]
    }
   },
  }
</script>

现在我们可以看见上面两个页面里面的数据是一样的。同一份数据,我们在两个页面里面操作两次感觉还行,如果有10个,20个 ……页面需要这样,那么这就是一个让人奔溃的事情,而且数据的同步刷新也很痛苦。所以就需要Vuex了。简言之:vuex就是将数据共享给多个组件共同使用,同时也将这个数据的状态进行了共享(一个组件改变这个数据的状态其它组件也跟着改变)。

Vue官网对Vuex的解释:

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
Vue核心概念Getter的使用方法
Jan 18 #Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 #Javascript
JavaScript数据结构之栈实例用法
Jan 18 #Javascript
Vue核心概念Action的总结
Jan 18 #Javascript
js取小数点后两位四种方法
Jan 18 #Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
You might like
PHP中几个常用的魔术常量
2012/02/23 PHP
php cli 小技巧
2013/06/03 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php上传文件问题汇总
2015/01/30 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
javascript Excel操作知识点
2009/04/24 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
微信小程序时间选择插件使用详解
2018/12/28 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Django添加feeds功能的示例
2018/08/07 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
NumPy中的维度Axis详解
2019/11/26 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
《广玉兰》教学反思
2014/04/14 职场文书
机械专业求职信
2014/05/25 职场文书
合作协议书范本
2014/10/25 职场文书
小组口号霸气押韵
2015/12/24 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
5个实用的JavaScript新特性
2022/06/16 Javascript