在 react 状态管理领域，react著作权归作者所有，禁止商业用途转载。【作者：唐霜】-redux 可谓是只手遮天了，基于 f【原创不易，请尊重版权】【原创不易，请尊重版权】lux 思想实现，小巧，immutabl【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.nete 的思想让数据变化可控。但 immut本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。able 所带来的编程代价太大了，如果你【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。要更新一个深层结构的对象的某个节点，写作【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】将会是极其麻烦的一件事，而且还保不准会出【本文受版权保护】【本文首发于唐霜的博客】错。为了保证 immutable，red著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netux 的 reducer 机制让开发者掉【本文首发于唐霜的博客】【转载请注明来源】光了头发。于是有了类似 dva、rema本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】tch 等这样的项目，这些项目基于 re著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】dux 再做了一层封装，让开发者少写了很【作者：唐霜】本文版权归作者所有，未经授权不得转载。多 reducer 相关的代码，但是很无【作者：唐霜】本文版权归作者所有，未经授权不得转载。奈，immutable 的特性，让开发需本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】要付出更多的精力来控制每一个更新。

再另一个世界，mutable state【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net 其实也非常优秀。知名的 mobx 推出【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。了 mobx-react 和 react本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】-redux 竞争。然而，原本非常优秀的转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。 mobx 却只管把自己的想法强加于人，本文作者：唐霜，转载请注明出处。【未经授权禁止转载】而忽视了代码写作的便捷性，总之，使用起来【转载请注明来源】著作权归作者所有，禁止商业用途转载。虽然不用再为 reducer 头疼，却对本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net组件的侵入和让人很不适应。你需要了解它的【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net概念，特别是基于观察者模式的很多概念，它本文作者：唐霜，转载请注明出处。【作者：唐霜】提供的 api 的形式也很丰富，基于接口未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net的、装饰器的，总之，你在掀开它的魔法盒子本文版权归作者所有，未经授权不得转载。【转载请注明来源】时，会忍不住“wo\cao/”，但当你真未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】正在项目中尝试使用它时，确会不由但发出“【版权所有，侵权必究】【本文受版权保护】wo^cao\”，但就在心智折腾上，就让著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】人抓狂，还不知道会产生多少副作用 bug本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。。

在 mutable 数据管理最优秀的，莫未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net过于 vue。无论初识还是长久，都会与 【本文首发于唐霜的博客】原创内容，盗版必究。vue 的响应式数据相看两不厌。它简介的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net用法，以及把基本原理告诉你，让你尽情去修转载请注明出处：www.tangshuang.net【转载请注明来源】改数据。Mutable 相对于 immu转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。table 的最大好处，就是可以对对象任【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net意节点上的对象进行修改，而无需仔细的把握【原创内容，转载请注明出处】原创内容，盗版必究。这个节点在整个 state 的什么位置上【原创内容，转载请注明出处】【作者：唐霜】，在 redux 的实践中，你可能都已经【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】厌烦了写 … 来解构对象/数【版权所有，侵权必究】【未经授权禁止转载】组了，但在 vue 中，根本不需要担心这著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】一个点，直接逮住一个对象，立即修改它的某【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net个属性，完事走人，不需要先构造出一个新的【原创内容，转载请注明出处】【未经授权禁止转载】数据，不需要调用某个接口把这个新数据传入【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】进去。虽然 redux 那种每一个状态都【转载请注明来源】本文作者：唐霜，转载请注明出处。是全新的思想很好，但是，你的状态不可能是本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。全新的，每一个被认为是全新的状态，都包含【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】了老状态的一部分（对象节点），而这些引用【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net，可能带来后续的错误。在 react 生未经授权，禁止复制转载。原创内容，盗版必究。态中，你可以使用 immutable.j著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】s 来尽可能避免这个问题。

但是在 vue 生态中，用于管理全局状态【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net的 vuex 确非得要引入 mution【作者：唐霜】【未经授权禁止转载】s, actions 的概念，这都是从 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netflux 借鉴过来的，而且很奇怪的是，在本文版权归作者所有，未经授权不得转载。【作者：唐霜】 mutions 中定义的修改，又要到 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】actions 中重做一遍。实在是有点自原创内容，盗版必究。【原创不易，请尊重版权】废武功啊。有没有一种方法，可以在 rea【未经授权禁止转载】【本文受版权保护】ct 中真正享受 vue 式的数据管理？未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net你不妨来试试下面的代码：

function MyComponent(props) {
  const { one } = props
  const { name, age, height, married, sex, changeSex, me, book, updateBook } = one
  return (
    <>
      {!!me && (
        <>
          <span>{me.user_name_zh}, {me.user_position}</span>
          <br />
        </>
      )}
      <span>{name}: {age}, {height}, {married ? 'married,' : ''} {sex ? 'F' : 'M'}</span>
      <br />
      <span>book: {book.price || 0}</span>
      <br />
      <button type="button" onClick={() => one.age ++}>grow</button>
      <button type="button" onClick={() => changeSex(!sex)}>change</button>
      <button type="button" onClick={() => updateBook({ price: (Math.random() * 100).toFixed(2) })}>update</button>
    </>
  )
}

const mapToProps = (contexts) => {
  const { one } = contexts
  return {
    one,
  }
}

export default connect(mapToProps)(MyComponent)

看这代码啊，和 react-redux 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。有点像，完全可以理解是不。

在数据开始对组件进行注入的时候，保持和 原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netreact-redux 一致的使用效果，【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】这实在是无缝的思想过渡，你觉得从原来写 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。react-redux 的代码到写这样的本文版权归作者所有，未经授权不得转载。【本文受版权保护】代码，会有压力吗？没有，一点都没有。下面本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net来看看这种全局状态管理的真面目：

import React from 'react'
import { use, connect } from 'react-tyshemo'

class Book {}

use({
  name: 'one',
  state: {
    name: 'one',
    age: 10,
    book: new Book(),
  },
  computed: {
    height() {
      return this.age * 5
    },
  },
  watch: {
    age({ value }) {
      if (value > 22) {
        this.married = true
      }
    },
  },
  methods: {
    changeSex(sex) {
      this.sex = sex
    },
    updateBook(data) {
      Object.assign(this.book, data)
      this.dispatch('book')
    },
  },
  hooks: {
    onUse() {
      fetch('/api/me').then(res => res.json()).then((json) => {
        const { data } = json
        this.me = data
      })
    },
  },
})

看完什么感受？“wo/cao/” 绝对是著作权归作者所有，禁止商业用途转载。【转载请注明来源】抄 vue！连属性名字都和 vue 组件【版权所有，侵权必究】未经授权，禁止复制转载。一毛一样（多了一个 hooks）。用一个【本文受版权保护】著作权归作者所有，禁止商业用途转载。 use 函数注册一个 state 的 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。namespace，并且这这个注册定义对【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。象中，传入 state, compute原创内容，盗版必究。【转载请注明来源】d, methods, watch 等来【未经授权禁止转载】【原创内容，转载请注明出处】实现状态数据的处理。由于对数据的操作和 【原创内容，转载请注明出处】【未经授权禁止转载】vue 是一摸一样，所以，你不用担心 a【作者：唐霜】原创内容，盗版必究。jax 请求的异步问题了，不需要考虑一大未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。堆 redux 带来的“解决问题带来的问著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】题”。而且，react-tyshemo 【未经授权禁止转载】转载请注明出处：www.tangshuang.net只提供几个函数接口，避免 mobx-re【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。act 那般复杂。

看上去是不是很舒服呢？

马上体验