vue(21)初识Vuex[通俗易懂]

vue(21)初识Vuex[通俗易懂]Vuex是做什么的?官方解释:Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

Vuex是做什么的?

  • 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

    • 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    • Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
  • 状态管理到底是什么?

    • 状态管理模式,集中式状态管理这些名词听起来就非常高大上,让人捉摸不透
    • 其实你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象中
    • 然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用
    • 那么,多个组件是否可以共享这个对象中的所有变量属性了呢?
       

管理什么状态呢?

  • 但是有什么状态需要我们在多个组件中共享的呢?
    • 如果你做过大型项目,你一定遇到过多个状态,在多个界面中共享的问题
    • 比如用户的登录状态、头像、信息、地理位置等等
    • 比如商品的收藏,购物车中的物品等等
    • 这些状态信息,我们都可以放在同一的地方,对它进行保存和管理,而且它们还是响应式的
       

单页面状态管理

  • 我们知道,要在单个组件中进行状态管理是一件非常简单的事情,我们来看下图
    vue(21)初识Vuex[通俗易懂]

  • 图中的3个状态,解释如下:

    • State:就是我们的状态(姑且可以当做是data中的属性);
    • VIew:视图层,可以针对state的变化,显示不同的信息;
    • Actions,这里的Actions主要是用户的各种操作:点击、输入等等,会导致状态的改变。

代码如下:

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

 

多界面状态管理

  • Vue已经帮我们做好了单个界面的状态管理,但如果是多个界面呢?
    • 多个视图都依赖同一个状态(一个状态改了,多个界面需要进行更新)
    • 不同界面的Actions都想修改同一个状态(比如:Home.vue要修改,Profile.vue也需要修改这个状态)
  • 也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个视图,但是也有一些状态(状态a/状态b/状态c)属于多个视图共同想要维护的
    • 状态1/状态2/状态3你放在自己的房间,你自己管理自己用,没问题
    • 但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理
    • 那么Vuex就是帮助我们统一管理的大管家
  • 全局单例模式
    • 我们现在要做的就是将共享的状态抽离出来,交给我们的大管家进行统一管理
    • 之后,我们的每个视图,按照规定好的规定,进行访问和修改操作
    • 这就是Vuex背后的思想

Vuex状态管理图例

vue(21)初识Vuex[通俗易懂]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165372.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 学单片机有前途还是嵌入式系统有前途好_嵌入式系统与单片机的前景

    学单片机有前途还是嵌入式系统有前途好_嵌入式系统与单片机的前景著名嵌入式工程师吴坚鸿曾经发过一贴“学单片机有前途还是嵌入式系统有前途?”原贴如下:http://www.makeru.com.cn/live/3523_1772.html?s=69821我在深圳一直搞单片机的开发,接的项目各种各样,不计其数。很多朋友问我学习单片机有前途还是嵌入式系统有前途,毫无疑问的,当然是单片机有前途。嵌入式系统现在炒得很火,满街到处都是嵌入式系统的培训。遇到很多刚入门…

  • Spring Batch 之 Hello World教程

    Spring Batch 之 Hello World教程SpringBatch之HelloWorld教程本文我们基于springboot和springbatch实现一个简单helloworld入门批处理程序。如果你刚刚接触springbatch,这篇教程会让你花最短时间理解springbatch框架。SpringBatch框架介绍开始代码之前,我们先了解框架中的核心组件,见下图:批处理过程有Job组成,job是封装整…

  • java calendar类_Java Calendar类

    java calendar类_Java Calendar类Calendar类概述/***java.util.Calendar类:是一个日历类*Calendar类是一个抽象类,里边提供了很多操作日历字段的方法*如:YEAR、MONTH、DAYOFMONTH、HOUR**Calendar类无法直接创建对象使用,里边有一个静态方法叫getInstance(),*getInstance()方法返回了Calendar类的子…

  • 一代、二代、三代测序技术原理与比较「建议收藏」

    一代、二代、三代测序技术原理与比较「建议收藏」从1977年第一代DNA测序技术(Sanger法)1,发展至今三十多年时间,测序技术已取得了相当大的发展,从第一代到第三代乃至第四代,测序读长从长到短,再从短到长。虽然就当前形势看来第二代短读长测序技术在全球测序市场上仍然占有着绝对的优势位置,但第三和第四代测序技术也已在这一两年的时间中快速发展着。测序技术的每一次变革,也都对基因组研究,疾病医疗研究,药物研发,育种等领域产生巨大的推动作用。在这里我主要对当前的测序技术以及它们的测序原理做一个简单的小结。

  • JNDI 什么

    JNDI 什么

    2021年12月30日
  • Java高级工程师常见面试题(一)-Java基础「建议收藏」

    Java高级工程师常见面试题(一)-Java基础「建议收藏」博主其他相关文章:《Java高级工程师常见面试题-总结》1.String类为什么是final的。多线程安全,将字符串对象保存在字符串常量池中共享效率高2.HashMap的源码,实现原理,底层结构。HashMap基于哈希表的Map接口的实现。允许使用null值和null键。此类不保证映射的顺序,特别是它不保证该顺序恒久不变。值得注意的是HashMap不是线程安全的…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号