在 Store 里面经常出现几种东西，比如 Observable，就是小部件需要用的数据，还有 Action ，也就是动作，动作可以去做一些事情，然后要去修改 Observable 的值，Observable 的值发生了变化，这样关注这个 Observable 的小部件就会被重建。

Observable

在这个 AppStore 里面，添加一个 bool 类型的属性，名字是 loading ，默认值是 false。想让它变成一个 Observable，可以使用 @observable 注释一下，之前给项目安装的 Store 生成器，会根据我们在 Store 里用的这些注释，自动生成需要的代码。也就是，需要一个 Observable ，就用 @observable 注释一下，剩下的事儿就不用我们管了。

Action

修改 Observable 的值要通过 Action，下面定义一个方法，名字是 setLoading，接收一个 bool 类型的 data 参数，在方法里让 loading 等于这个 data 参数的值。让这个普通的方法变成一个可以修改 Observable 值的动作，可以用 @action 注释一下这个方法。

因为之前我们监视了项目文件的变化，然后自动生成需要的代码，所以你会发现跟这个 Store 对应的生成的这个文件的内容会发生一些变化。

Provider

假设这个 Store 已经定义好了，要把它提供给小部件使用的话可以通过 Provider，打开 app_provider.dart，在这里定义一个 appStoreProvider，等于一个 Provider.value，提供的值是一个 AppStore 实例。

然后在 appProviders 里面，添加一个 appStoreProvider。

使用

下面再找个小部件用一下这个 appStore 里的东西，比如可以打开 post_index_latest.dart，在文件顶部导入 provider 这个包。在这个小部件的 build 方法里面，声明一个 appStore，等于 context.read() 类型是 AppStore。

在小部件的 Container 里面，暂时去掉这个 PostList 小部件，换成一个 Column 小部件，把 mainAxisAlignment 设置成 MainAxisAlignment.center。它的 children 里面先用一个 Text 小部件，显示的东西就是 appStore 里的 loading 的值。

下面再添加一个 ElevatedButton ，小部件的 child 是一个 Text，文字是测试。 再设置一下 onPressed，在这个方法里面执行一下 appStore.setLoading 修改一下 loading 的值，提供的值是 !appStore.loading，也就是跟当前 loading 的值相反的值。

如果界面出现错误，可以打开编辑器的调试，重新启动一下应用。

测试

在模拟器上测试一下，按一下这个测试按钮，会执行 appStore 里的 setLoading 修改它里面的 loading 这个 Observable 的值。不过你会发现，界面上显示的这个 loading 的值并没有什么变化。

Observer

如果你想在这个 Observable 发生变化的时候，重构使用了它的小部件，这里还需要用一个 Observer 小部件，剪切一下这个 Text 小部件，用一个 Observer 小部件，它来自 flutter_mobx 这个包，用一个 builder 方法返回一个小部件，这里就是之前剪切的这个 Text 小部件。

因为这里使用了 appStore 里的 loading 这个 Observable，这个 Observer 小部件就会关注这个 Observable 的变化，如果它有变化，就会重建它的 builder 方法返回的这个小部件。

测试

再测试一下，按一下界面上的测试，修改了 appStore 里的 loading 的值，界面就会发生相应的变化。