首页 > 前端 > Vue

简介:

很多人在学习完Vue.js之后还会看到一个经常被提及的词语叫做Vuex。

Vuex字面上看与Vue.js只差了一个字母,但是他们两个做的事情完全不一样。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

用通俗一点的话来说,Vuex就是一个用于管理SPA项目中状态的开源产品。

手把手教你vuex

什么是状态?为什么要去管理它?

  状态这个东西其实我们生活中随处可见。我们头顶上的灯就有两种状态,一种是开,一种是关。状态说白了就是灯这个对象的的某个属性的值。

  如果你对状态和属性这两个概念还是有所不了解,那么我打一个其他的比方吧。

  我们平时是否有玩过王者荣耀或者英雄联盟LOL之类的网游?这些游戏里面每一个英雄当前都有生命值,法力值,攻击力,法术强度,护甲和魔抗等等,这些是这个英雄的属性,也就是英雄这个对象当前的状态。

  属性分为固定属性和可变属性,一般像LOL里面大部分ADC英雄如果没有特殊的被动或者其他装备的支持,那么它的的攻击距离都是固定的,这个就是固定属性,这种固定属性的状态由于正常情况下都是不变的,所以我们可以直接写死在代码中(这种写死在代码中的变量的值称为硬编码),但是像其他的攻击力法术强度等等都是随装备和等级变化,那么这种属性是可变属性。

  这些属性的状态由于会根据用户的各种操作(比如说出装备,打怪升级升级)变化。在传统的Vue.js的组件化开发中,一般这些状态都是分散在各个组件中,此时此刻如果两个英雄互相打起来了,那么就得分别去不同的组件中取状态值,然后进行状态值的修改,最后还要互相读取对方的状态值。如果他们本身是父子组件,那么还可以通过事件触发或者Prop属性来传递状态,但是如果是不同的组件,由于由于Vue.js本身组件之间有作用域,它们无法直接相互通信,所以就需要一些东西例如Vuex去集中管理和追踪它的变化。

标签: Vuex状态管理教程 vue教程
评论加载中...