为什么要使用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 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
script标签属性用type还是language
Jan 21 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
js常见表单应用技巧
2008/01/09 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
Vue中props的使用详解
2018/06/15 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
管道维修工岗位职责
2013/12/27 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
初中生物教学随笔
2015/08/15 职场文书
经销商会议开幕词
2016/03/04 职场文书