Mutation 是要修改数据，这些修改是同步的操作。有些需要异步做的事情，我们可以分配给 Action 去做。Action 可以 commit Mutation .. 也就是在 Action 执行完异步操作以后，可以去提交一个修改 .. 在 action 里面，你可以得到 store 里的属性还有方法，比如 state，getters 等等 ..

现在我要做的是在 Counter 组件挂载以后，分配一个 Action，这个 Action 要做的是请求一下我们之前定义的后端服务接口，得到接口返回的数据以后 commit 一个修改，这个修改可以设置 store 里的数据 ..

先在 store 里添加一个 actions 属性，它里面的东西就是定义的一些动作 .. 比如添加一个 getCount .. 动作接收一个 context 参数 ..

在这个动作里我要用去请求一下后端服务接口，所以需要用到一个 HTTP 客户端，这里我要用的是 axios .. 打开 index.html .. 可以嵌入一个 axios 脚本 ... https://unpkg.com/axios/dist/axios.min.js 这里我直接使用一个在 cdn 上的 axios ..

回到 index.js .. 在 getCount 这个动作里，用一下 axios 的 get 方法，发出一个 GET 类型的请求，请求的地址是 http://localhost:8080/api/count .. 这个接口是我们之前定义好的一个后端服务接口 ...

axios 会返回 Promise ，所以我们可以接着再用一个 then .. 去处理返回的结果 .. 一个 response 参数 .. 在里面， 我们可以用一下 context 的 commit ，去提交一个修改 .. 这个 mutation 的名字是 setCount ，等会儿我们再去定义这个修改 .. 请求回来的数据是在 response.data 下面的 count .. 这个 count 就是接口返回来的一组数字 ..

Mutation

再去定义这里要用的这个 setCount 修改 .. 一个 state 参数，还有一个 payload 参数 .. 让 state.count 等于 payload ，这个 payload 在这里就是请求接口以后返回来的那组数字 ..

dispatch

再找到 counter 组件 .. 用一个生命周期方法，比如 mounted .. 组件挂载以后会触发执行它 .. 里面可以用一下 this.$store.dispatch ，用它触发执行一个动作 .. 这里就是 getCount ..

或者也可以这样 .. 在上面，先定义一个 mapActions .. 等于 Vuex 下面的 mapActions ..

然后在组件里面，添加一个 methods ... 用一个 spread .. 操作符 .. 处理一下 mapActions 返回的东西 .. 一个数组 .. 里面添加一个 getCount ..

这样在 mounted 里面，我们可以直接用一下 this.getCount() 这个方法 ..

预览

回到浏览器 .. 预览一下 .. 这里控制台上出现了一个错误 .. 说 XMLHttpRequest cannot load 我们的这个接口的资源 .. 因为 No 'Access-Control-Allow-Origin' header is present on the requested resource ..

意思是在请求的资源那里面没有 Access-Control-Allow-Origin 这个头部信息 .. 这是一个跨域的问题 .. 我们可以改造一下后端服务 ..

打开 server.js .. 可以在应用里面添加一个中间件 .. app.use .. 一个函数 .. 这个函数就是中间件 .. 它有三个参数 .. request, response, next .. 里面用一下 response.header .. 响应一个头部信息 .. 信息就是 Access-Control-Allow-Origin .. 对应的值是 * 号 ..

再执行一下 next()

回到浏览器 .. 刷新一下 .. 现在页面上会显示一些值 ... 这些值就是根据请求后端服务接口返回来的那组数字计算出来的 .. 在 Vue 的开发者工具这里，你会发现，state 下面的 count 有了一些值 ..

再打开 Network 选项卡 .. XHR ... 这里有个对 count 的请求 .. 这个请求就是对我们定义的后端服务接口的请求 .. 地址就是 api/count .. Preview ... 请求返回来的就是一组数字 ..

这个请求是通过 Vuex 应用里的 getCount 这个 Action 发出的 ..