State management（状态管理）

时间：2022-03-23 07:57:29

State management

https://en.wikipedia.org/wiki/State_management

UI控件的状态管理， 例如按钮的灰化、只读、显示隐藏等。 特殊地一个控件的状态依赖其它控件的状态。

补充：对于控件的依赖不仅仅来自于其它的控件， 也可能来自于后台数据的状态， 例如故事数据变化导致浏览器中 股票的日开线的变化。

State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface. In this user interface programming technique, the state of one UI control depends on the state of other UI controls. For example, a state managed UI control such as a button will be in the enabled state when input fields have valid input values and the button will be in the disabled state when the input fields are empty or have invalid values.

HTTP协议的状态管理

http://hc.apache.org/httpcomponents-client-ga/tutorial/html/statemgmt.html

Originally HTTP was designed as a stateless, request / response oriented protocol that made no special provisions for stateful sessions spanning across several logically related request / response exchanges. As HTTP protocol grew in popularity and adoption more and more systems began to use it for applications it was never intended for, for instance as a transport for e-commerce applications. Thus, the support for state management became a necessity.

3.1. HTTP cookies

An HTTP cookie is a token or short packet of state information that the HTTP agent and the target server can exchange to maintain a session. Netscape engineers used to refer to it as a "magic cookie" and the name stuck.

https://datatracker.ietf.org/doc/rfc6265/?include_text=1

　　COOKIE规范

3.  Overview

   This section outlines a way for an origin server to send state

   information to a user agent and for the user agent to return the

   state information to the origin server.

   To store state, the origin server includes a Set-Cookie header in an

   HTTP response.  In subsequent requests, the user agent returns a

   Cookie request header to the origin server.  The Cookie header

   contains cookies the user agent received in previous Set-Cookie

   headers.  The origin server is free to ignore the Cookie header or

   use its contents for an application-defined purpose.

   Origin servers MAY send a Set-Cookie response header with any

   response.  User agents MAY ignore Set-Cookie headers contained in

   responses with 100-level status codes but MUST process Set-Cookie

   headers contained in other responses (including responses with 400-

   and 500-level status codes).  An origin server can include multiple

   Set-Cookie header fields in a single response.  The presence of a

   Cookie or a Set-Cookie header field does not preclude HTTP caches

   from storing and reusing a response.

   Origin servers SHOULD NOT fold multiple Set-Cookie header fields into

   a single header field.  The usual mechanism for folding HTTP headers

   fields (i.e., as defined in [RFC2616]) might change the semantics of

   the Set-Cookie header field because the %x2C (",") character is used

   by Set-Cookie in a way that conflicts with such folding.

UI状态管理

https://www.imooc.com/article/19233

一个较大的项目中，会涉及到很多数据，有的是纯前端的，也有来自后台的，随着 View 层交互行为的驱动，整个项目中的数据需要涉及到大量的数据变更，这种变更会十分复杂，以至于我们无法追踪状态的源头，这个时候，就需要采用一些方案，来管理这些数据状态，所谓的状态管理，管理的是从视图层事件源到数据变迁的映射过程。Facebook 公司提出了最早的 Flux 状态管理技术，现在前端框架流行的状态管理，都遵照 Flux 的“单向数据流”理念，所谓单向数据流，基本上是这样运作的： <strong>Action</strong>  <strong>Dispatch</strong>   <strong>Store</strong>  <strong>View</strong>，也就是说，在一个项目中，我们会建立一个状态树，叫做 Store，把所有的 State（状态）全部放在这个 Store 树中，如果你要改变 View，就必须通过一些动作来操作 Store 中的 state. Vue 的状态管理方法 Vuex 就是依照 Flux 的“单向数据流”理念，在 Vuex 的官方文档中，还有一个更为简洁的单向数据流示意图，如下：

vuex

https://segmentfault.com/a/1190000012015742

先引用vuex官网的话：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理模式、集中式存储管理 一听就很高大上，蛮吓人的。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件*其他组件使用。这么说吧，将vue想作是一个js文件、组件是函数，那么vuex就是一个全局变量，只是这个“全局变量”包含了一些特定的规则而已。

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！

相关文章