页面状态

状态是一个 JavaScript 对象，这是驱动 AIP 页面变化的核心模型。当状态对象发生变化后，对应的界面会响应式的发生变化。你可以直接在 HTML 页面中书写 aip-state 来提供局部状态。

局部状态指令（aip-state）

AIP 允许你直接在 HTML 元素中添加 aip-state 属性表明局部状态，aip-state 的值接受一个 JavaScript 对象。

简单的示例：

<div aip-state="{ greeting: 'hello world' }">...</div>

现在被这个元素包裹的所有元素都可以访问 greeting 变量，就像你预期的那样，当 greeting 变量变更时，和他有联系的所有内容都会做出反应。

嵌套状态

你可以通过 aip-state 指令来嵌套状态数据，例如，你有两个局部状态元素，子元素可以访问到父元素上的所有变量，并且会一直查找到全局状态。

<div aip-state="{ greeting: 'hello' }">
    <div aip-state="{ name: 'developer' }">
        <span>{{greeting}} {{name}}</span>
    </div>
</div>

最终上面的 span 元素会展示为 hello developer 。

嵌套的逻辑和 JavaScript 的作用域相同，其实这是通过 Object.create 来实现的数据链路查找，本质和原型链逻辑一致。

当子元素和父元素有相同的变量时，会优先使用子元素的变量。

同级状态

AIP 的局部状态在同一个元素上也是可以直接访问到的，这样可以不用多套一层，例如：

<div aip-state="{ name: 'developer' }" aip-text="name"></div>