Vuex 是什么,为什么需要

Vuex 十分简单好用,没用过难免会有神秘感,以致于往往就高估了其使用难度,其实也就那么回事,没什么高大上的。

Vuex 是什么

Vuex 是专门为 Vue.js 设计的状态管理库,它采用集中式存储管理应用的所有组件的状态。

状态管理是什么

状态管理并不是什么神奇的概念,其实你一直都在做,即便你从来没了解过状态管理的概念。

我们先看文档里的示例,一个 Vue 计数应用:

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

这个应用包含以下几个部分:

  • state,驱动应用的数据源;
  • view,以声明方式将 state 映射到视图;
  • actions,响应在 view 上的用户输入导致的状态变化。

这是一个状态自管理应用,状态自管理?可以这样理解,state,view,action,三部分都写在了组件内,状态由应用组件各自管理,即自己的状态自己管理

而我们常说的状态管理,往往是指外部管理,目的是对状态和组件进行分离,具体到 Vuex 里的表现就是:把应用的所有组件的状态抽取出来,以一个全局单例模式在应用外部采用集中式存储管理

看来,状态管理并不是新鲜的东西,不过就是把内部对 state 部分的操作,都拿到外部去罢了,事实也确实如此。

为什么需要状态管理

很多人最初喜欢用 Vue,React 这类框架,大概都是因为框架的响应式特性——当数据改变时,视图会进行重新渲染。这其实正是框架解决的最核心的问题。

image

1. view 显示了 state
2. 用户在 view 上操作,会触发 action 去改变 state
3. state 的改变,导致 view 层再渲染

有没有发现一个有趣的问题,在这个单向流动的过程中,

  • 步骤 1 和 步骤 3 已经由 Vue 的响应式特性来做了,我们并不关心其实现细节。
  • 步骤 2 是我们参与的地方,这正是状态管理的部分。

既然我们并不关心 view 层是如何自动渲染的,为什么我们不把状态管理view 层的代码分离开,分开的好处显而易见,比如我们可以随时换掉 view 层的实现,而不用修改状态管理部分的任何代码,这个理由足够让我们单独对状态进行管理。

为什么需要 Vuex

对于简单的状态管理,一个简单的 store 模式就足够了,官方示例:

var store = {
  debug: true,
  state: {
    message: "Hello!"
  },
  setMessageAction(newValue) {
    if (this.debug) console.log("setMessageAction triggered with", newValue);
    this.state.message = newValue;
  },
  clearMessageAction() {
    if (this.debug) console.log("clearMessageAction triggered");
    this.state.message = "";
  }
};

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

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
});
  • 所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。
  • 此外,每个实例/组件仍然可以拥有和管理自己的私有状态:
image

接着我们继续延伸约定,

  • 组件不允许直接修改属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变

这其实已经是 Flux 架构,这样约定的好处是,我们能够记录所有 store 中发生的 state 改变,同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。

Vuex 正是借鉴了 Flux、Redux 等,为了更好地在组件外部管理状态,显然我们需要 Vuex。

Flux 架构就像眼镜

Flux 架构就像眼镜:您自会知道什么时候需要它。

近视了就需要戴眼镜了,近视 100 度你可能不需要,200 度你可能也不需要,不要着急,总有一个度数会让你带上它。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,934评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,113评论 0 6
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,666评论 7 61
  • 本文对 Vuex 官方文档重新组织编排,希望正在学习 Vue 的同学们,在阅读后可快速使用 Vuex。 开始使用 ...
    大前端艺术家阅读 712评论 0 0
  • 这阴冷的天气,且有些小雨,总有种萧索的味道,只是没了落叶的陪衬,在这寒冷的天气中也就难以感受到那份浪漫之意。在公交...
    天外飞雪阅读 722评论 0 1