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)
blank

相关推荐

  • 数据解读 | 川菜出圈只靠辣?你太小瞧川菜了[通俗易懂]

    数据解读 | 川菜出圈只靠辣?你太小瞧川菜了[通俗易懂]图片来自网络,侵删作者|钟黛编辑|陆泓设计|张梓豪来源|DT财经(ID:DTcaijing)聚餐不知道吃什么,结局通常是二选一…

  • Java文件读写

    Java文件读写1.%g用于输出科学计数法2.用printf输出换行除了’\n’,还可以用’%n’3.File类的几个构造方法:1)File(StringdirectoryPath)2)File(StringdirectoryPath,Stringfilename)3)File(FiledirObj,Stringfilename)4)File(URIuri)注意,这里的对象指的可能是一个…

  • 什么是FEBS[通俗易懂]

    什么是FEBS[通俗易懂]FEBS后台权限管理系统FEBS是一个简单高效的后台权限管理系统。项目基础框架采用全新的JavaWeb开发框架——SpringBoot2.0.4,消除了繁杂的XML配置,使得二次开发更为简单

  • WPA2协议新攻击方法(KRACK)—WPA2密钥重安装漏洞[通俗易懂]

    WPA2协议新攻击方法(KRACK)—WPA2密钥重安装漏洞[通俗易懂]KeyReinstallationAttacksBreakingWPA2byforcingnoncereuse今年9月份CCS公布了一篇新论文,该论文提出了一种新的攻击方法:KeyReinstallationAttacks,这种攻击方法对WPA2危害甚大。本文简单介绍该攻击方法。我们都知道所有WiFi网络都是靠WiFiProtectedAccess协议的某个实现版

  • c语言位运算符的优先级_c语言运算符优先级由高到低

    c语言位运算符的优先级_c语言运算符优先级由高到低一、位运算(|&^~)运算符 描述 实例 & 按位与操作,按二进制位进行”与”运算。运算规则: 0&0=0;0&1=0;1&0=0;1&1=1; (A&B)将得到12,即为00001100 | 按位或运算符,按二进制位进行”或”运算。运算规则: 0|0=0;0|1=1;1|0=1;1|1=1;.

  • ftp扫描软件下载_ftp扫描文件夹连接失败

    ftp扫描软件下载_ftp扫描文件夹连接失败不知道大家用过哪几种ftp扫描工具,是不是感觉都是大同小异的呢?其实市面上的ftp扫描工具功能都是差不多的,当然也还是有一点差别的,那一点的差别可能就是我们选择那一种ftp扫描工具的原因。不论怎么说,也都是要选择自己喜欢的ftp扫描工具来使用。第一款:IIS7服务器管理工具这款工具里面的ftp扫描工具体验感是比较好的,除了一般ftp扫描工具里面都有的批量管理,它还有很多自己设计的功能。可以说这就是它成功的关键。它还能够进行定时上传下载、定时备份和多任务同时进行。哦对,它还有自动更新的功能。IIS7服务

发表回复

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

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