为什么要使用Vuex的介绍
单向数据流
以下是一个表示“单向数据流”理念的极简示意:
但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
- - 多个视图依赖于同一状态。
- - 来自不同视图的行为需要变更同一状态。
对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。
因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!
另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想,借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
什么情况下应该使用 Vuex?
虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:
Flux 架构就像眼镜:您自会知道什么时候需要它。
如果没有使用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 和单纯的全局对象有以下两点不同:
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
- 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
- day10、nfs+rsync全网备份及实时同步
- Flask-信号(blinker)
- Python中的单例模式的几种实现方式的及优化
- 程序员学习python必备的4大网站,你用过几个?
- 知面不知心?AI帮你看懂对方的“小心思”
- 数据库连接池,本地线程,上下文管理
- 2018年微信小程序风口趋势预测
- 小程序走在取代APP路上
- 重磅!小程序社交立减金全面开放,快来领攻略
- VR/AR未来何去何从?
- 使用Python+Tensorflow的CNN技术快速识别验证码
- 数字化医院科研信息化管理平台的设计
- 人工智能双刃剑:可协助安全专家,也可带来挑战
- “人工智能+教育”巨浪冲击下,传统的教育理念是否还能幸存?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【C语言简单说】三:浮点数变量和字符变量(4)
- 【C语言简单说】三:变量总结ASCII码扩展(5)
- 【C语言简单说】四:常量
- 【C语言简单说】五:常用运算符
- 【C语言简单说】六:取模运算符以及变量的扩展
- 【C语言简单说】七:自定义函数(1)
- 【C语言简单说】七:自定义函数(2)
- 【C语言简单说】七:自定义函数(3)
- 【C语言简单说】八:分支结构之if(1)
- 【C语言简单说】八:分支结构之if...else...(2)
- 【C语言简单说】八:分支结构之if...else if()...else...(3)
- 【C语言简单说】九:输入
- 【C语言简单说】十:小结
- 【C语言简单说】十一:switch 补
- 【C语言简单说】十二:逻辑运算符&&