页面显示之前会执行 fetch 方法，在这个方法里我们可以请求后端服务接口，得到数据以后可以提交一个修改 .. 比如这个列表页面，现在是直接在组件里请求服务接口，得到数据以后把数据作为组件的状态 .. 下面我们可以使用 vuex 的方式改造一下 ..

先去创建一个 store，放在 store 目录的下面，名字是 posts.js .. 文件里面 export 一个 state .. 数据里面有个 list，它是一个数组 .. 这个 list 表示的就是页面上要显示的数据 ..

下面再定义一个 muation .. export 一个 mutations .. 一个对象 .. 里面添加一个叫 setList 的 mutation .. 一个 state 参数 .. payload 可以叫 list ..

这个 mutation 就是让 state 里的 list 等于 payload .. 这里就是 list ..

然后打开内容列表页面 .. pages .. posts .. index.vue ..

页面上用的数据是在 asyncData 这个方法里面请求得到的 .. 可以先注释掉这个方法 .. 然后在组件里面添加一个 fetch .. 这个方法有个 context 参数 .. 这里我们把它里面的 $axios 还有 store 直接拿出来 ..

把这个方法再标记成一个 async 方法 ..

方法里面，添加一个 response .. await .. 执行一下 $axios.get .. 请求的地址是 http://localhost:3333/posts ..

得到了响应以后 .. 执行一下 store 上的 commit，提交一个修改 .. 名字是 posts/setList .. 带的 payload 是 response.data ... 如果请求接口成功，在请求得到的响应里面的 data 属性里面，就会包含一组数据 ..

下面在这个组件里面，再添加一个 computed .. 它里面添加一个 posts .. return 的是 this.$store.state.posts.list ..

回到内容列表页面 .. 页面上仍然会显示之前的这组内容列表 .. 不过现在这个页面上使用的数据并不是组件里的 State .. 而是 posts 这个 store 里的 list ..