vue详解_vuex getters

vue详解_vuex gettersVuex是做什么的?官方解释: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详解_vuex getters

  • 图中的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详解_vuex getters

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

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

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

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

(0)


相关推荐

  • ubuntu中利用ffmeg将短视频转化为动图.gif.「建议收藏」

    ubuntu中利用ffmeg将短视频转化为动图.gif.「建议收藏」命令:ffmpeg-ss00:00:1-i/home/jiangcm/Pictures/session_gpus_pre.mp4-to00:00:8-r4-vfscale=700:-1/home/jiangcm/Pictures/session_gpus_pre.gif解读:-ss00:00:1:表示从第1秒开始;-i:表示invert,转换,后面跟着转换的视频;-to:表示结束时间;-r4:4帧率;vfscale=700:-1:制定宽度,高度为原来的倍;/ho

  • 操作系统进程调度实验报告心得_进程的管理和控制实验报告

    操作系统进程调度实验报告心得_进程的管理和控制实验报告题目要求一、 实验目的多道程序设计中,经常是若干个进程同时处于就绪状态,必须依照某种策略来决定那个进程优先占有处理机。因而引起进程调度。本实验模拟在单处理机情况下的处理机调度问题,加深对进程调度的理解。二、 实验内容1. 优先权法、轮转法简化假设1) 进程为计算型的(无I/O)2) 进程状态:ready、running、finish3) 进程需要的CPU时间以时间片为单位确定2. 算法描述1) 优先权法——动态优先权当前运行进程用完时间片后,其优先权减去一个常数。2) 轮转法三、

  • mybatis看这一篇就够了,简单全面一发入魂

    mybatis看这一篇就够了,简单全面一发入魂文章目录Mybatis概述快速入门原生开发示例基于Mapper代理的示例基于注解的示例应用场景主键返回批量查询动态SQL缓存关联查询延迟加载逆向工程PageHelper分页插件MybatisPlusMybatis概述mybatis是什么?有什么特点?它是一款半自动的ORM持久层框架,具有较高的SQL灵活性,支持高级映射(一对一,一对多),动态SQL,延迟加载和缓存等特性,但它的数据库无关性较低什么是ORM?ObjectRelationMapping,对象关系映射。对象指的是Java

  • 高德地图标记点要注意的问题

    高德地图标记点要注意的问题高德地图标记点要注意的问题当打开高德地图的时候,使用API进行获取自身位置坐标,然后再进行setCenter设置中心是这样的。直接看代码:initMap(){//初始化地图map=newAMap.Map(‘map-gaode’,{resizeEnable:true,zoom:13})//初始化中心点//1、无坐标有详细地址时letsure=this.initAddress()

  • 浅析AnyCast网络技术「建议收藏」

    浅析AnyCast网络技术「建议收藏」什么是BGPAnyCast?BGPanycast就是利用一个(多个)as号码在不同的地区广播相同的一个ip段。利用bgp的寻路原则,短的aspath会选成最优路径(bgp寻路原则之n),从而优化了访问速度。其实bgpanycast是不同服务器用了相同的ip地址。阿里的DNS就是使用了BGPAnyCast“其实bgpanycast是不同服务器用了相同的ip地址。”言简意赅啊!D…

  • 请你用三角形和平行四边形设计一个漂亮的图案(圆形和正方形组合图形)

    一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码。整合了一下,有错误欢迎指出。1.正方形650)this.width=650;”alt=””border=”0″src=”http://www.meilizhuo.com/uploads/allimg/141105/09101KE1-0.png”style=”border:0px;”/>#square{width:100

发表回复

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

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