点击这个 Add 按钮，让它触发一个动作，这个动作可以向后端服务接口发送一个随机的数字，后端服务收到这个数字以后会把这个数字放到指定的地方 ..

先添加一个 Action .. 名字可能是 addCount .. 它的第一个参数是 context 对象，里面会包含 store 里的属性还有方法 .. 这里我们只需要一个 commit ，可以直接把它拿出来用 .. { commit } .. 第二个参数是个 payload ..

里面用一下 axios 的 post 方法 .. 请求后端服务接口 .. 地址是 localhost:8080/api/count .. 因为这是一个 post 类型的请求， 我们得在请求里配置一下请求的主体 .. 一个对象 .. 后端接口期待主体里有个 number 属性 .. 对应的值是个数字 .. 这里用 payload 表示 ..

再用一个 then .. 在这里 commit 一个 add 修改 .. 把 payload 再告诉这个修改 ..

然后找到 AddButton 这个组件 .. 点击这个按钮的时候执行组件的 add 方法 .. 它现在会直接 commit 一个修改 .. 这里可以改造一下 ..

先 ...mapActions .. 要用的动作是 addCount .. 然后在这个 add 方法里，用一下 addCount ..

预览

再去预览一下 .. 点击 Add 按钮 ... 没有反应 .. 控制台上有错误 .. 打开看一下 .. 这里说 Request header field . Content-Type is not allowed .. 不支持 Content-Type 这个头部信息 ..

我们要再修改一下服务器 .. 打开 api 下面的 server.js ..

在这个中间件里 .. 再添加一条响应的头部 .. 名字是 Access-Control-Allow-Header .. 对应的值是 Content-Type ..

回到浏览器 .. 刷新一下 ..

点击 Add .. 这样会触发执行 addCount 这个动作 .. 这个动作会把一个随机的数字发送给后端服务 .. 后端服务收到这个数字以后会把它放在 count 里面 ..

动作里又 commit 了一个 add 修改 ..

观察一下现在的 state 里的 count 的值 ..

刷新一下页面 ..

这个 state 里的 count 跟刚才是一样的 .. 因为这个 count 里的数据现在来自后端服务 ...

remove

下面可以再添加一个 removeCount 动作 .. 添加一个 removeCount .. 提取一个 commit .. 里面用一下 axios 的 delete 方法，请求我们的后端服务接口 .. 地址是 localhost:8080/api/count ..

then ... commit 一个 remove 修改 ..

找到 RemoveButton 这个组件 .. ...mapActions .. 用一个 removeCount 动作 .. 在它的 remove 方法里面，用一下 this.removeCount ..

回到浏览器 .. 再预览一下 .. 又提示了错误 ..

这回说 Method DELETE is not allowed .. 因为点击 remove 按钮，会用 http 的 delete 方法请求后端服务接口 .. 服务器还没有允许使用这种 http 方法 ..

修改一下服务器的代码 .. 添加一条新的响应头部 .. 名字是 Access Control Allow Methods .. 对应的值就是允许使用的 HTTP 方法 .. POST PUT PATCH DELETE GET .. 还有 OPTIONS ..

再回到浏览器去试一下 ...

点击 add .. 会把一个随机的数字发送给后端服务 .. 点击 remove 按钮 .. 会删除掉后端服务里面的 count 数据的最后一个项目 ..