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 这类框架,大概都是因为框架的 响应式 特性—— 当数据改变时,视图会进行重新渲染 。这其实正是框架解决的最核心的问题。

Vuex 是什么,为什么需要

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 之前发生了什么。
  • 此外,每个实例/组件仍然可以拥有和管理自己的私有状态:
Vuex 是什么,为什么需要

接着我们继续延伸约定,

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

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

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


以上所述就是小编给大家介绍的《Vuex 是什么,为什么需要》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

科技想要什么

科技想要什么

[美] 凯文·凯利 / 熊祥 / 中信出版社 / 2011-11 / 58.00元

在《科技想要什么》一书中,凯文•凯利向我们介绍了一种全新的科技观。他认为,作为整体,科技不是由线路和金属构成的一团乱麻,而是有生命力的自然形成的系统,它的起源完全可以回溯到生命的初始时期。正如生物进化呈现出无意识的趋势,科技也是如此。通过追踪这些长期趋势,我们可以对“科技想要什么”有所理解。 凯文•凯利预测了未来数十年科技的12种趋势,包括创造大脑这一得寸进尺之举。不过,为了让人类创造的世界......一起来看看 《科技想要什么》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具