为什么要使用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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
element-ui中按需引入的实现
Dec 25 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP图片加水印实现方法
2016/05/06 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python远程linux执行命令实现
2020/11/11 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
学校学期工作总结
2015/08/13 职场文书
初中历史教学反思
2016/02/19 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
python垃圾回收机制原理分析
2022/04/13 Python