{"action":"created","comment":{"url":"https://api.github.com/repos/vuejs/vuex/pulls/comments/57519649","id":57519649,"diff_hunk":"@@ -1,135 +1,134 @@\n # Actions\n \n-Actions 是用于 dispatch mutations 的函数。Actions 可以是异步的，一个 action 可以 dispatch 多个 mutations.\n-\n-一个 action 描述了有什么事情应该发生，把本应该在组件中调用的逻辑细节抽象出来。当一个组件需要做某件事时，只需要调用一个 action —— 组件本身并不需要关心具体的后果：不需要提供回调函数也不需要期待返回值，因为 actions 的结果一定是 state 产生了变化，而 state 一旦变化，便会触发组件的 DOM 更新。 这样，组件便完全和 action 的具体逻辑解耦了。\n-\n-因此，我们通常在 actions 中做 API 相关的请求。通过 actions 的封装，我们使得组件和 mutations 都不需要关心这些异步逻辑。\n-\n > Vuex actions 和 Flux 中的 \"action creators\" 是等同的概念，但是我觉得这个定义常让人感到困惑（比如分不清 actions 和 action creators）。\n \n-### 简单的 Actions\n-\n-最简单的情况下，一个 action 即触发一个 mutation。Vuex 提供一个快捷的方式去定义这样的 actions:\n+Actions 是用于分发 mutations 的函数。按照惯例，Vuex actions 的第一个参数是 store 实例，附加上可选的自定义参数。\n \n ``` js\n-const store = new Vuex.Store({\n-  state: {\n-    count: 1\n-  },\n-  mutations: {\n-    INCREMENT (state, x) {\n-      state.count += x\n-    }\n-  },\n-  actions: {\n-    // 快捷定义\n-    // 只要提供 mutation 名\n-    increment: 'INCREMENT'\n-  }\n-})\n+// 最简单的 action\n+function increment (store) {\n+  store.dispatch('INCREMENT')\n+}\n+\n+// 带附加参数的 action\n+// 使用 ES2015 参数解构\n+function incrementBy ({ dispatch }, amount) {\n+  dispatch('INCREMENT', amount)\n+}\n ```\n \n-调用 action:\n+乍一眼看上去感觉多此一举，我们直接分发 mutations 岂不更方便？实际上并非如此，还记得 **mutations 必须同步执行**这个限制么？Actions 就不受约束！我们可以在 action 内部执行**异步**操作：\n \n ``` js\n-store.actions.increment(1)\n+function incrementAsync ({ dispatch }) {\n+  setTimeout(() => {\n+    dispatch('INCREMENT')\n+  }, 1000)\n+}\n ```\n \n-这相当于调用：\n+来看一个更加实际的购物车示例，涉及到**调用异步 API** 和 **分发多重 mutations**：\n+\n \n ``` js\n-store.dispatch('INCREMENT', 1)\n+function checkout ({ dispatch, state }, products) {\n+  // 把当前购物车的物品备份起来\n+  const savedCartItems = [...state.cart.added]\n+  // 发出检出请求，然后乐观地清空购物车\n+  dispatch(types.CHECKOUT_REQUEST)\n+  // 购物 API 接受一个成功回调和一个失败回调\n+  shop.buyProducts(\n+    products,\n+    // 成功操作\n+    () => dispatch(types.CHECKOUT_SUCCESS),\n+    // 失败操作\n+    () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)\n+  )\n+}\n ```\n \n-注意所有传递给 action 的参数同样会传递给 mutation handler.\n+请谨记一点，必须通过分发 mutations 来处理调用异步 API 的结果，而不是依赖返回值或者是传递回调来处理结果。基本原则就是：**Actions 除了分发 mutations 不能造成别的副作用**。","path":"docs/zh-cn/actions.md","position":79,"original_position":79,"commit_id":"6d2e0ecdff3d9dfbfa81d6c7094b56eae34972bc","original_commit_id":"6d2e0ecdff3d9dfbfa81d6c7094b56eae34972bc","user":{"login":"yyx990803","id":499550,"avatar_url":"https://avatars.githubusercontent.com/u/499550?v=3","gravatar_id":"","url":"https://api.github.com/users/yyx990803","html_url":"https://github.com/yyx990803","followers_url":"https://api.github.com/users/yyx990803/followers","following_url":"https://api.github.com/users/yyx990803/following{/other_user}","gists_url":"https://api.github.com/users/yyx990803/gists{/gist_id}","starred_url":"https://api.github.com/users/yyx990803/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yyx990803/subscriptions","organizations_url":"https://api.github.com/users/yyx990803/orgs","repos_url":"https://api.github.com/users/yyx990803/repos","events_url":"https://api.github.com/users/yyx990803/events{/privacy}","received_events_url":"https://api.github.com/users/yyx990803/received_events","type":"User","site_admin":false},"body":"这里改成『Actions 除了分发 mutations 应当尽量避免其他副作用』吧，因为有时候还是有必要的。","created_at":"2016-03-26T21:13:21Z","updated_at":"2016-03-26T21:13:21Z","html_url":"https://github.com/vuejs/vuex/pull/122#discussion_r57519649","pull_request_url":"https://api.github.com/repos/vuejs/vuex/pulls/122","_links":{"self":{"href":"https://api.github.com/repos/vuejs/vuex/pulls/comments/57519649"},"html":{"href":"https://github.com/vuejs/vuex/pull/122#discussion_r57519649"},"pull_request":{"href":"https://api.github.com/repos/vuejs/vuex/pulls/122"}}},"pull_request":{"url":"https://api.github.com/repos/vuejs/vuex/pulls/122","id":64230414,"html_url":"https://github.com/vuejs/vuex/pull/122","diff_url":"https://github.com/vuejs/vuex/pull/122.diff","patch_url":"https://github.com/vuejs/vuex/pull/122.patch","issue_url":"https://api.github.com/repos/vuejs/vuex/issues/122","number":122,"state":"open","locked":false,"title":"zh-cn-docs-patch","user":{"login":"ryerh","id":5818263,"avatar_url":"https://avatars.githubusercontent.com/u/5818263?v=3","gravatar_id":"","url":"https://api.github.com/users/ryerh","html_url":"https://github.com/ryerh","followers_url":"https://api.github.com/users/ryerh/followers","following_url":"https://api.github.com/users/ryerh/following{/other_user}","gists_url":"https://api.github.com/users/ryerh/gists{/gist_id}","starred_url":"https://api.github.com/users/ryerh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryerh/subscriptions","organizations_url":"https://api.github.com/users/ryerh/orgs","repos_url":"https://api.github.com/users/ryerh/repos","events_url":"https://api.github.com/users/ryerh/events{/privacy}","received_events_url":"https://api.github.com/users/ryerh/received_events","type":"User","site_admin":false},"body":"在 http://forum.vuejs.org/topic/3546 中提到了一些翻译中遇到的问题，望得到解答。","created_at":"2016-03-26T06:14:17Z","updated_at":"2016-03-26T21:13:21Z","closed_at":null,"merged_at":null,"merge_commit_sha":"150e8542d99cf2602f0eb1ffa9e4895d85ea33b0","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/vuejs/vuex/pulls/122/commits","review_comments_url":"https://api.github.com/repos/vuejs/vuex/pulls/122/comments","review_comment_url":"https://api.github.com/repos/vuejs/vuex/pulls/comments{/number}","comments_url":"https://api.github.com/repos/vuejs/vuex/issues/122/comments","statuses_url":"https://api.github.com/repos/vuejs/vuex/statuses/6d2e0ecdff3d9dfbfa81d6c7094b56eae34972bc","head":{"label":"ryerh:zh-cn-docs-patch","ref":"zh-cn-docs-patch","sha":"6d2e0ecdff3d9dfbfa81d6c7094b56eae34972bc","user":{"login":"ryerh","id":5818263,"avatar_url":"https://avatars.githubusercontent.com/u/5818263?v=3","gravatar_id":"","url":"https://api.github.com/users/ryerh","html_url":"https://github.com/ryerh","followers_url":"https://api.github.com/users/ryerh/followers","following_url":"https://api.github.com/users/ryerh/following{/other_user}","gists_url":"https://api.github.com/users/ryerh/gists{/gist_id}","starred_url":"https://api.github.com/users/ryerh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryerh/subscriptions","organizations_url":"https://api.github.com/users/ryerh/orgs","repos_url":"https://api.github.com/users/ryerh/repos","events_url":"https://api.github.com/users/ryerh/events{/privacy}","received_events_url":"https://api.github.com/users/ryerh/received_events","type":"User","site_admin":false},"repo":{"id":54614011,"name":"vuex","full_name":"ryerh/vuex","owner":{"login":"ryerh","id":5818263,"avatar_url":"https://avatars.githubusercontent.com/u/5818263?v=3","gravatar_id":"","url":"https://api.github.com/users/ryerh","html_url":"https://github.com/ryerh","followers_url":"https://api.github.com/users/ryerh/followers","following_url":"https://api.github.com/users/ryerh/following{/other_user}","gists_url":"https://api.github.com/users/ryerh/gists{/gist_id}","starred_url":"https://api.github.com/users/ryerh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryerh/subscriptions","organizations_url":"https://api.github.com/users/ryerh/orgs","repos_url":"https://api.github.com/users/ryerh/repos","events_url":"https://api.github.com/users/ryerh/events{/privacy}","received_events_url":"https://api.github.com/users/ryerh/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/ryerh/vuex","description":"Flux-inspired Application Architecture for Vue.js.","fork":true,"url":"https://api.github.com/repos/ryerh/vuex","forks_url":"https://api.github.com/repos/ryerh/vuex/forks","keys_url":"https://api.github.com/repos/ryerh/vuex/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ryerh/vuex/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ryerh/vuex/teams","hooks_url":"https://api.github.com/repos/ryerh/vuex/hooks","issue_events_url":"https://api.github.com/repos/ryerh/vuex/issues/events{/number}","events_url":"https://api.github.com/repos/ryerh/vuex/events","assignees_url":"https://api.github.com/repos/ryerh/vuex/assignees{/user}","branches_url":"https://api.github.com/repos/ryerh/vuex/branches{/branch}","tags_url":"https://api.github.com/repos/ryerh/vuex/tags","blobs_url":"https://api.github.com/repos/ryerh/vuex/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ryerh/vuex/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ryerh/vuex/git/refs{/sha}","trees_url":"https://api.github.com/repos/ryerh/vuex/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ryerh/vuex/statuses/{sha}","languages_url":"https://api.github.com/repos/ryerh/vuex/languages","stargazers_url":"https://api.github.com/repos/ryerh/vuex/stargazers","contributors_url":"https://api.github.com/repos/ryerh/vuex/contributors","subscribers_url":"https://api.github.com/repos/ryerh/vuex/subscribers","subscription_url":"https://api.github.com/repos/ryerh/vuex/subscription","commits_url":"https://api.github.com/repos/ryerh/vuex/commits{/sha}","git_commits_url":"https://api.github.com/repos/ryerh/vuex/git/commits{/sha}","comments_url":"https://api.github.com/repos/ryerh/vuex/comments{/number}","issue_comment_url":"https://api.github.com/repos/ryerh/vuex/issues/comments{/number}","contents_url":"https://api.github.com/repos/ryerh/vuex/contents/{+path}","compare_url":"https://api.github.com/repos/ryerh/vuex/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ryerh/vuex/merges","archive_url":"https://api.github.com/repos/ryerh/vuex/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ryerh/vuex/downloads","issues_url":"https://api.github.com/repos/ryerh/vuex/issues{/number}","pulls_url":"https://api.github.com/repos/ryerh/vuex/pulls{/number}","milestones_url":"https://api.github.com/repos/ryerh/vuex/milestones{/number}","notifications_url":"https://api.github.com/repos/ryerh/vuex/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ryerh/vuex/labels{/name}","releases_url":"https://api.github.com/repos/ryerh/vuex/releases{/id}","deployments_url":"https://api.github.com/repos/ryerh/vuex/deployments","created_at":"2016-03-24T04:14:38Z","updated_at":"2016-03-24T04:14:38Z","pushed_at":"2016-03-26T06:11:11Z","git_url":"git://github.com/ryerh/vuex.git","ssh_url":"git@github.com:ryerh/vuex.git","clone_url":"https://github.com/ryerh/vuex.git","svn_url":"https://github.com/ryerh/vuex","homepage":"","size":6505,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"vuejs:master","ref":"master","sha":"9071ec3a7c5779cb928addbbe79a1f5b5df0169f","user":{"login":"vuejs","id":6128107,"avatar_url":"https://avatars.githubusercontent.com/u/6128107?v=3","gravatar_id":"","url":"https://api.github.com/users/vuejs","html_url":"https://github.com/vuejs","followers_url":"https://api.github.com/users/vuejs/followers","following_url":"https://api.github.com/users/vuejs/following{/other_user}","gists_url":"https://api.github.com/users/vuejs/gists{/gist_id}","starred_url":"https://api.github.com/users/vuejs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vuejs/subscriptions","organizations_url":"https://api.github.com/users/vuejs/orgs","repos_url":"https://api.github.com/users/vuejs/repos","events_url":"https://api.github.com/users/vuejs/events{/privacy}","received_events_url":"https://api.github.com/users/vuejs/received_events","type":"Organization","site_admin":false},"repo":{"id":39176269,"name":"vuex","full_name":"vuejs/vuex","owner":{"login":"vuejs","id":6128107,"avatar_url":"https://avatars.githubusercontent.com/u/6128107?v=3","gravatar_id":"","url":"https://api.github.com/users/vuejs","html_url":"https://github.com/vuejs","followers_url":"https://api.github.com/users/vuejs/followers","following_url":"https://api.github.com/users/vuejs/following{/other_user}","gists_url":"https://api.github.com/users/vuejs/gists{/gist_id}","starred_url":"https://api.github.com/users/vuejs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vuejs/subscriptions","organizations_url":"https://api.github.com/users/vuejs/orgs","repos_url":"https://api.github.com/users/vuejs/repos","events_url":"https://api.github.com/users/vuejs/events{/privacy}","received_events_url":"https://api.github.com/users/vuejs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/vuejs/vuex","description":"Flux-inspired Application Architecture for Vue.js.","fork":false,"url":"https://api.github.com/repos/vuejs/vuex","forks_url":"https://api.github.com/repos/vuejs/vuex/forks","keys_url":"https://api.github.com/repos/vuejs/vuex/keys{/key_id}","collaborators_url":"https://api.github.com/repos/vuejs/vuex/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/vuejs/vuex/teams","hooks_url":"https://api.github.com/repos/vuejs/vuex/hooks","issue_events_url":"https://api.github.com/repos/vuejs/vuex/issues/events{/number}","events_url":"https://api.github.com/repos/vuejs/vuex/events","assignees_url":"https://api.github.com/repos/vuejs/vuex/assignees{/user}","branches_url":"https://api.github.com/repos/vuejs/vuex/branches{/branch}","tags_url":"https://api.github.com/repos/vuejs/vuex/tags","blobs_url":"https://api.github.com/repos/vuejs/vuex/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/vuejs/vuex/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/vuejs/vuex/git/refs{/sha}","trees_url":"https://api.github.com/repos/vuejs/vuex/git/trees{/sha}","statuses_url":"https://api.github.com/repos/vuejs/vuex/statuses/{sha}","languages_url":"https://api.github.com/repos/vuejs/vuex/languages","stargazers_url":"https://api.github.com/repos/vuejs/vuex/stargazers","contributors_url":"https://api.github.com/repos/vuejs/vuex/contributors","subscribers_url":"https://api.github.com/repos/vuejs/vuex/subscribers","subscription_url":"https://api.github.com/repos/vuejs/vuex/subscription","commits_url":"https://api.github.com/repos/vuejs/vuex/commits{/sha}","git_commits_url":"https://api.github.com/repos/vuejs/vuex/git/commits{/sha}","comments_url":"https://api.github.com/repos/vuejs/vuex/comments{/number}","issue_comment_url":"https://api.github.com/repos/vuejs/vuex/issues/comments{/number}","contents_url":"https://api.github.com/repos/vuejs/vuex/contents/{+path}","compare_url":"https://api.github.com/repos/vuejs/vuex/compare/{base}...{head}","merges_url":"https://api.github.com/repos/vuejs/vuex/merges","archive_url":"https://api.github.com/repos/vuejs/vuex/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/vuejs/vuex/downloads","issues_url":"https://api.github.com/repos/vuejs/vuex/issues{/number}","pulls_url":"https://api.github.com/repos/vuejs/vuex/pulls{/number}","milestones_url":"https://api.github.com/repos/vuejs/vuex/milestones{/number}","notifications_url":"https://api.github.com/repos/vuejs/vuex/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/vuejs/vuex/labels{/name}","releases_url":"https://api.github.com/repos/vuejs/vuex/releases{/id}","deployments_url":"https://api.github.com/repos/vuejs/vuex/deployments","created_at":"2015-07-16T04:21:26Z","updated_at":"2016-03-26T14:18:50Z","pushed_at":"2016-03-26T16:25:00Z","git_url":"git://github.com/vuejs/vuex.git","ssh_url":"git@github.com:vuejs/vuex.git","clone_url":"https://github.com/vuejs/vuex.git","svn_url":"https://github.com/vuejs/vuex","homepage":"","size":6576,"stargazers_count":924,"watchers_count":924,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":103,"mirror_url":null,"open_issues_count":13,"forks":103,"open_issues":13,"watchers":924,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/vuejs/vuex/pulls/122"},"html":{"href":"https://github.com/vuejs/vuex/pull/122"},"issue":{"href":"https://api.github.com/repos/vuejs/vuex/issues/122"},"comments":{"href":"https://api.github.com/repos/vuejs/vuex/issues/122/comments"},"review_comments":{"href":"https://api.github.com/repos/vuejs/vuex/pulls/122/comments"},"review_comment":{"href":"https://api.github.com/repos/vuejs/vuex/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/vuejs/vuex/pulls/122/commits"},"statuses":{"href":"https://api.github.com/repos/vuejs/vuex/statuses/6d2e0ecdff3d9dfbfa81d6c7094b56eae34972bc"}}}}