下面我们可以定义一个内容列表 Store ，用它替换一下之前创建的这个 PostIndexModel。在项目里新建一个文件，放在 lib/post/index 里面，名字是 post_index_store.dart。

用我们在项目里添加的代码片断，定义一个 Store ，输入 xs 按下 tab ，可以快速得到一个 Store。要包含的文件是 post_index_store.g.dart ，名字是 PostIndexStore。

打开 post_index_model ，复制一下在这个文件里定义的这个类里面的这些东西。回到 post_index_store.dart，把复制的东西粘贴到这个 _PostIndexStore 里面。

下面再整理修改一下，先选中 PostIndexModel 构造方法里的这几个参数，剪切一下，再把这个 PostIndexModel 构造方法删除掉。然后选中 _PostIndexStore 这个构造方法，在里面添加几个带名字的参数，把剪切的东西粘贴到这里。选中 PostListLayout，选择导入 post.dart 。

再选中下面这个 AppService，选择导入这个 app_service。 然后选中这个 posts 还有 layout 这两个属性，剪切一下，把它们放在数据这个区域的下面。

然后选中 getPosts 这个方法，暂时把它放在动作这个区域的下面。

再把 storeLayout 还有 parsePosts 这两个方法，放在属性的下面。 选中 appService ，剪切一下，也把它放在属性的下面。然后把这个 setLayout 转移到动作这个区域的下面。

下面可以导入一些东西，选中 jsonDecode，选择导入 dart:convert 这个包。 选中 setLayout 里的 notifyListeners 方法，把它删除掉。

再选中 getPosts 里的 AppConfig，选择导入 app_config ，再把这个方法里用的 notifyListeners 删除掉。

然后找到 posts 这个属性，在它上面用 @observable 标注一下，这个属性的类型可以调整一下，设置成 ObservableList。

下面这个 layout 属性也用 @observable 标注一下。

再找到 setLayout 这个方法，用 @action 标注一下它，让它变成这个 Store 里的一个 Action，也就是动作。

在它上面可以再定义一个动作，用 @action 标注一下，动作的名字是 setPosts，接收一个参数，类型是 List 名字是 data。 在这个动作里面设置一下 posts ，让它等于 data 这个参数的值，因为这个 data 是个 List，这个 posts 是个 ObservableList，所以要处理一下这个 data，用一下 ObservableList.of ，把 data 交给这个方法。

下面再修改一下 getPosts 这个方法， 去掉设置 posts 值的这行代码，这里可以换成一个 setPosts ，把 parsed 交给这个方法。

Provider

定义好这个 Store 以后可以用一个 Provider 把它提供给小部件使用。打开 post_provider ，现在我们可以把 postIndexProvider 删除掉，这里可以换成一个 postIndexStoreProvider，它的值用一下 ProxyProvider ，第一个类型是 AppService，第二个是 PostIndexStore 。

给它提供一个 update 方法，第一个参数是 context，第二个是 appService，第三个是 postIndexStore。方法 return 的东西是一个 PostIndexStore 实例， 设置一下 appService 参数，值是 appService，然后是 posts，值是 postIndexStore? 里的 posts，再设置一下 layout，值是 postIndexStore? 里的 layout。

再把上面导入的这个 post_index_model 删除掉。找到文件底部的 postProviders ，把这个 postIndexProvider 换成 postIndexStoreProvider。

改造

下面改造一下应用里的几个地方，打开 post_list.dart ，在这个 restoreLayout 方法里用了一下 PostIndexModel 里的 setLayout ，把这个 PostIndexModel 换成 PostIndexStore。

然后找到 initState 里面用的这个 getPosts 方法，换成 PostIndexStore 里的这个 getPosts 方法。

再修改一下 build 方法，先把这个方法里的内容全部选中，剪切一下，然后可以 return 一个 Observer 小部件，在这个小部件的 builder 里面，把刚才剪切的东西粘贴到这里。

把这里声明的这个 model 删除掉，声明一个 postIndexStore，值是 context.read ，类型是 PostIndexStore。下面这个 posts 的值是 postIndexStore 里的 posts 。 再声明一个 layout ，值是 postIndexStore 里的 layout。

找到下面用的这个 model.layout ，现在可以把它换成 layout 。

打开编辑器的调试，重新启动一下应用。 可以正常显示内容列表，现在获取内容列表用的方法，设置内容列表数据用的动作，是在 PostIndexStore 里定义的。

再打开项目里的 app_page_header_actions_more，改一下这个 postIndexModel ，改成 postIndexStore，再把 context.watch 改成 context.read ，类型设置成 PostIndexStore。

然后把下面用的所有的 postIndexModel ，全部都替换成 postIndexStore。

在模拟器上再测试一下，打开这个弹出菜单，修改一下内容列表的布局，如果能正常修改内容列表的布局，说明我们改造成功了。

最后我们可以把在 post/index 里创建的 post_index_model.dart 这个文件从项目里删除掉。

把它删除掉以后，导入使用它的几个地方就会报错，先打开 app_page_header_actions_more ，把导入 post_index_model 的代码删除掉。

再打开 post_list.dart，同样把导入 post_index_model 的代码删除掉。 然后打开 post_list_item.dart ，把导入 post_index_model 的代码删除掉。