为什么要使用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 ajax提交表单数据的两种实现方法
Apr 29 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
基于js实现数组相邻元素上移下移
May 19 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php中使用GD库做验证码
2016/03/31 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
企业文化宣传标语
2014/06/09 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
js基础语法与maven项目配置教程案例
2021/07/15 Javascript