Vue.js 2.0 状态管理

news2025/1/4 15:25:09

类 Flux 状态管理的官方实现

由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex: 我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools,无需配置即可访问时光旅行。

React 的开发者请参考以下信息

如果你是来自 React 的开发者,你可能会对 vuex 和 redux 间的差异表示关注,redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层,所以它能够轻松的通过一些简单绑定和Vue一起使用。vuex区别在于它是一个专门为 vue 应用所设计。这使得它能够更好地和vue进行整合,同时提供简洁的API和改善过的开发体验。

简单状态管理起步使用

经常被忽略的是,Vue 应用中原始 data 对象的实际来源 - 当访问数据对象时,一个 Vue 实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享:

const sourceOfTruth = {}
const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})

现在当 sourceOfTruth 发生变化,vmA 和 vmB 都将自动的更新引用它们的视图。子组件们的每个实例也会通过 this.$root.$data 去访问。现在我们有了唯一的实际来源,但是,调试将会变为噩梦。任何时间,我们应用中的任何部分,在任何数据改变后,都不会留下变更过的记录。

为了解决这个问题,我们采用一个简单的 store 模式

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    this.debug && console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    this.debug && console.log('clearMessageAction triggered')
    this.state.message = 'action B triggered'
  }
}

需要注意,所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。

此外,每个实例/组件仍然可以拥有和管理自己的私有状态:

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

重要的是,注意你不应该在 action 中 替换原始的状态对象 - 组件和 store 需要引用同一个共享对象,mutation 才能够被观察。

接着我们继续延伸约定,组件不允许直接修改属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变,我们最终达成了 Flux 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 改变,同时实现能做到记录变更 (mutation) 、保存状态快照、历史回滚/时光旅行的先进的调试工具。

说了一圈其实又回到了vuex ,如果你已经读到这儿,或许可以去尝试一下!

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/416997.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

详解linux多线程——互斥锁、条件变量、读写锁、自旋锁、信号量

一、互斥锁(同步) 在多任务操作系统中,同时运行的多个任务可能都需要使用同一种资源。这个过程有点类似于,公司部门里,我在使用着打印机打印东西的同时(还没有打印完),别人刚好也在此…

华为ADS 2.0智驾助力阿维塔成为智能电动汽车领军品牌

随着科技的不断发展和智能化的迅速崛起,智能电动汽车已经成为当今汽车行业的热点话题。在这一领域,中国汽车品牌阿维塔科技近日引人瞩目地成为了首批搭载华为ADS 2.0智驾系统的品牌。在2023年4月16日举行的华为智能汽车解决方案发布会上,阿维…

HCIA第二次笔记

目录 OSI/RM七层参考模型——开放式的系统互联参考模型 核心——分层 TCP/IP模型——TCP/IP协议簇 应用层 应用层协议 封装与解封装 传输层 TCP协议和UDP协议的区别 TCP的报文 TCP的三次握手 TCP的四次挥手 TCP的四种可靠传输机制 OSI/RM七层参考模型——开放式的系…

单链表经典面试题 (动图解析)

🎉🎉🎉点进来你就是我的人了 博主主页:🙈🙈🙈戳一戳,欢迎大佬指点!人生格言:当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔🦾&am…

Lars bak

(1)先从smalltalk说起上回书《阿伦凯(Alan Kay)》咱们说到世界上第一个基于语言虚拟机的编程语言Smalltalk,以及它的创造者:Alan kay。今天我再沿着语言虚拟机这条路,再走向系统虚拟机《虚拟机:IBM-S/360-O…

WebServer项目(一)->计网知识补充

WebServer项目->计网知识补充1.网络结构模式C/S结构B/S结构2.MAC 地址3.IP 地址1)IP 地址编址方式2)A类IP地址3)B类IP地址4)C类IP地址5)D类IP地址(了解)6)特殊的网址7)子网掩码4.端口5.网络模型1)OSI 七层参考模型(Open System Interconnection)2)TCP…

测试开发岗 - 一面复盘

1. 什么是软件测试, 谈谈你对软件测试的了解 软件测试就是验证产品特性是否符合用户需求, 软件测试贯穿于软件的整个生命周期. >>> 那软件测试具体是什么呢 ? 就拿生活中的例子来说, 比如说我们去商场买衣服, 会有以下几个步骤 : 第一步: 我们会走进门店…

SSM版本个人博客系统实现

SSM版本的个人博客系统 文章目录SSM版本的个人博客系统统一的数据返回处理关于前端的一些问题实现注册功能实现登录的功能存储session获取用户的信息获取左侧的个人信息获取右侧的博客列表时间格式化删除操作注销功能(退出登录)查看文章的详情页排查问题…

机器人项目与产品开发

ROS(Robot Operating System) ROS(Robot Operating System)是一个开源的机器人操作系统,旨在为机器人软件开发提供一个通用的、模块化的、分布式的软件平台。ROS由加州大学伯克利分校机器人实验室开发,目前…

一图看懂 xlwings 模块:基于 BSD 协议在 Excel 中方便调用 Python 库(反之亦然), 资料整理+笔记(大全)

本文由 大侠(AhcaoZhu)原创,转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 xlwings 模块:基于 BSD 协议在 Excel 中方便调用 Python 库(反之亦然), 资料整理笔记(大全)摘要模块图类关系图模…

向量和矩阵的backward

向量&#xff1a; 有yw*x&#xff0c;取w、x分别如下且y得&#xff1a; x1 tc.tensor([[5],[6]], dtypetc.float32, requires_gradTrue) w tc.tensor([[10,20],[30,40]], dtypetc.float32, requires_gradTrue) y1 tc.mm(w, x1) y1: tensor([[170.],[390.]], grad_fn<M…

网络安全必学 SQL 注入

1.1 .Sql 注入攻击原理 SQL 注入漏洞可以说是在企业运营中会遇到的最具破坏性的漏洞之一&#xff0c;它也是目前被利用得最多的漏洞。要学会如何防御 SQL 注入&#xff0c;首先我们要学习它的原理。 针对 SQL 注入的攻击行为可描述为通过在用户可控参数中注入 SQL 语法&#…

LightGBM——提升机器算法详细介绍(附代码)

LightGBM——提升机器算法 前言 LightGBM是个快速的&#xff0c;分布式的&#xff0c;高性能的基于决策树算法的梯度提升框架。可用于排序&#xff0c;分类&#xff0c;回归以及很多其他的机器学习任务中。 在竞赛题中&#xff0c;我们知道XGBoost算法非常热门&#xff0c;它…

MySQL:安装 MySQL、Navicat、使用 Navicat 连接 MySQL

文章目录Day 01&#xff1a;一、概念1. 数据库 DB2. 数据库管理系统 DBMS3. MySQL二、安装 MySQL三、安装 Navicat Premium 16四、使用 Navicat 连接 MySQL注意&#xff1a;Day 01&#xff1a; 一、概念 1. 数据库 DB 数据库&#xff1a;DB (Database) 数据仓库&#xff0c;…

NumPy 秘籍中文第二版:四、将 NumPy 与世界的其他地方连接

原文&#xff1a;NumPy Cookbook - Second Edition 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 在本章中&#xff0c;我们将介绍以下秘籍&#xff1a; 使用缓冲区协议使用数组接口与 MATLAB 和 Octave 交换数据安装 RPy2与 R 交互安装 JPype将 NumPy 数组发送到 J…

脑电信号分析

导读 EEG信号的分析过程是为了获得能够突出信号本身特定特性的值&#xff0c;从而对其进行表征。同时&#xff0c;也需要将所获得的值通过准确的绘图技术来进行正确地显示&#xff0c;以使这些值对用户有用且清晰易读。目前&#xff0c;已有许多不同的脑电信号分析和显示技术&…

MVCC

MVCC基本概念 当前读 当前读 : 读取的是记录的最新版本,读取时还要保证其他并发事务不能修改当前记录,会对读取的记录进行加锁. 对于我们日常的操作. 如 : select....lock in share mode(共享锁) , select * for update , update ,insert,delete(排他锁) 都是一种当前读. 快…

「Cpolar」使用Typecho搭建个人博客网站【内网穿透实现公网访问】

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后端的开发语言A…

Spring学习小结

文章目录1 BeanFactory与ApplicationContext的关系2 Spring基础环境下&#xff0c;常用的三个ApplicationContext3 Spring开发中Bean的配置4 Bean的初始化和销毁方法配置5 Bean的实例化配置6 Bean的依赖注入之自动装配7 Spring 的 xml 标签&#xff08;默认、自定义&#xff09…

硬件语言Verilog HDL牛客刷题 day09 哲K部分

1.VL59 根据RTL图编写Verilog程序 1.题目&#xff1a; 根据以下RTL图&#xff0c;使用 Verilog HDL语言编写代码&#xff0c;实现相同的功能&#xff0c;并编写testbench验证功能 2.解题思路 2.1 了解D触发器的知识 &#xff08;在时钟是上升沿的时候&#xff0c; 输入是什么…