Vuex 是什么,为什么需要

栏目: 编程语言 · 发布时间: 5年前

内容简介:Vuex 十分简单好用,没用过难免会有神秘感,以致于往往就高估了其使用难度,其实也就那么回事,没什么高大上的。Vuex 是专门为 Vue.js 设计的状态管理并不是什么神奇的概念,其实你一直都在做,即便你从来没了解过状态管理的概念。

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 是什么,为什么需要》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Remote

Remote

Jason Fried、David Heinemeier Hansson / Crown Business / 2013-10-29 / CAD 26.95

The “work from home” phenomenon is thoroughly explored in this illuminating new book from bestselling 37signals founders Fried and Hansson, who point to the surging trend of employees working from hom......一起来看看 《Remote》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具