{"id":1108,"date":"2024-03-07T11:16:27","date_gmt":"2024-03-07T03:16:27","guid":{"rendered":"http:\/\/ericw.top\/?p=1108"},"modified":"2024-03-08T09:30:20","modified_gmt":"2024-03-08T01:30:20","slug":"vuex-%e6%a0%b8%e5%bf%83%e6%a6%82%e5%bf%b5-mutations","status":"publish","type":"post","link":"http:\/\/ericw.top\/?p=1108","title":{"rendered":"vuex \u6838\u5fc3\u6982\u5ff5 &#8211; mutations"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"toc-0\">\u901a\u8fc7\u8f85\u52a9\u51fd\u6570 - mapState\u83b7\u53d6 state\u4e2d\u7684\u6570\u636e<\/h2>\n\n\n\n<p>mapState\u662f\u8f85\u52a9\u51fd\u6570\uff0c\u5e2e\u52a9\u6211\u4eec\u628astore\u4e2d\u7684\u6570\u636e\u6620\u5c04\u5230 \u7ec4\u4ef6\u7684\u8ba1\u7b97\u5c5e\u6027\u4e2d, \u5b83\u5c5e\u4e8e\u4e00\u79cd\u65b9\u4fbf\u7684\u7528\u6cd5<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"159\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-21-1024x159.png\" alt=\"\" class=\"wp-image-1109\" style=\"width:618px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-21-1024x159.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-21-300x46.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-21-768x119.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-21.png 1323w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>1\u3001\u7b2c\u4e00\u6b65\uff1a\u5728\u5bfc\u5165<strong>mapState<\/strong> (mapState\u662fvuex\u4e2d\u7684\u4e00\u4e2a\u51fd\u6570)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >import { mapState } from &#039;vuex&#039;<\/code><\/pre>\n\n\n\n<p>2\u3001\u7b2c\u4e8c\u6b65\uff1a\u91c7\u7528\u6570\u7ec4\u5f62\u5f0f\u5f15\u5165state\u5c5e\u6027<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >mapState(&#091;&#039;count&#039;])<\/code><\/pre>\n\n\n\n<p>3\u3001\u7b2c\u4e09\u6b65\uff1a\u5229\u7528<strong>\u5c55\u5f00\u8fd0\u7b97\u7b26<\/strong>\u5c06\u5bfc\u51fa\u7684\u72b6\u6001\u6620\u5c04\u7ed9\u8ba1\u7b97\u5c5e\u6027<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&nbsp;computed: {\n&nbsp; &nbsp;...mapState(&#091;&#039;count&#039;])\n} \n\n\n&lt;div&gt; state\u7684\u6570\u636e\uff1a{{ count }}&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-1\">Vuex\u7684\u5355\u9879\u6570\u636e\u6d41<\/h2>\n\n\n\n<p>\u6211\u4eec\u5982\u679c\u60f3\u8981\u4fee\u6539\u7ec4\u4ef6\u4ed3\u5e93\u7684\u6570\u636e\uff0c\u7ec4\u4ef6\u4e2d\u4e0d\u80fd\u76f4\u63a5\u4fee\u6539\u4ed3\u5e93\u7684\u6570\u636e<\/p>\n\n\n\n<p>\u6240\u4ee5\u6211\u4eec\u8981\u7528\u5230<code class=\"prettyprint\" >mutations<\/code>\u6765\u4fee\u6539state \u6570\u636e<\/p>\n\n\n\n<p><strong>state\u6570\u636e\u7684\u4fee\u6539\u53ea\u80fd\u901a\u8fc7<code class=\"prettyprint\" >mutations<\/code>\uff0c\u5e76\u4e14<code class=\"prettyprint\" >mutations<\/code>\u5fc5\u987b\u662f\u540c\u6b65\u7684<\/strong><\/p>\n\n\n\n<p>1\u3001\u5b9a\u4e49mutations  \u5728vuex\u4ed3\u5e93index\u4e2d\u5b9a\u4e49mutations<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >const store &nbsp;= new Vuex.Store({\n&nbsp;state: {\n&nbsp; &nbsp;count: 0\n},\n&nbsp;\/\/ \u5b9a\u4e49mutations\n&nbsp;mutations: {\n  }\n})<\/code><\/pre>\n\n\n\n<p>2\u3001\u683c\u5f0f\u8bf4\u660e  <code class=\"prettyprint\" >mutations<\/code>\u91cc\u9762\u653e\u7684\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u5fc5\u987b\u662f<code class=\"prettyprint\" >state<\/code><\/p>\n\n\n\n<p><code class=\"prettyprint\" >mutations<\/code>\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5bf9\u8c61\u4e2d\u5b58\u653e\u4fee\u6539state\u7684\u65b9\u6cd5<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >mutations: {&lt;br&gt;&nbsp; &nbsp;\/\/ \u65b9\u6cd5\u91cc\u53c2\u6570 \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u5f53\u524dstore\u7684state\u5c5e\u6027&lt;br&gt;&nbsp; &nbsp;\/\/ payload \u8f7d\u8377 \u8fd0\u8f93\u53c2\u6570 \u8c03\u7528mutaiions\u7684\u65f6\u5019 \u53ef\u4ee5\u4f20\u9012\u53c2\u6570 \u4f20\u9012\u8f7d\u8377&lt;br&gt;&nbsp; &nbsp;addCount (state) {&lt;br&gt;&nbsp; &nbsp; &nbsp;state.count += 1&lt;br&gt;&nbsp; }&lt;br&gt;},<\/code><\/pre>\n\n\n\n<p>3.\u7ec4\u4ef6\u4e2d\u63d0\u4ea4 <code class=\"prettyprint\" >mutations  <\/code>\u5728\u7ec4\u4ef6\u4e2d\u7684\u65b9\u6cd5\u4e2d\u63d0\u4ea4<code class=\"prettyprint\" >commit<\/code>\uff0c\u5373\u53ef\u63d0\u4ea4\u5230<code class=\"prettyprint\" >mutations<\/code>\u4e2d<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >this.$store.commit(&#039;addCount&#039;)<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-2\">\u53c2\u6570\u4f20\u9012<\/h2>\n\n\n\n<p><code class=\"prettyprint\" >mutations<\/code>\u4e2d\u7684\u65b9\u6cd5\uff0c\u662f\u53ef\u4ee5\u5e26\u53c2\u6570\u4f20\u9012\u7684<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >mutations: {\n  ...\n  addCount (state, count) {\n    state.count = count\n  }\n},<\/code><\/pre>\n\n\n\n<p>\u9875\u9762\u4e2d\u63d0\u4ea4\u8c03\u7528 <code class=\"prettyprint\" >mutation<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >handle ( ) {\n  this.$store.commit(&#039;addCount&#039;, 10)\n}<\/code><\/pre>\n\n\n\n<p>\u5c06\u53c2\u657010\u4f20\u9012\u5230\u9053\u8def<code class=\"prettyprint\" >mutations<\/code>\u4e2d\u7684<code class=\"prettyprint\" >count<\/code>\u7684\u4f4d\u7f6e\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-3\">Vuex\u4e2d\u7684\u503c\u548c\u7ec4\u4ef6\u4e2d\u7684input\u53cc\u5411\u7ed1\u5b9a<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"148\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-22-1024x148.png\" alt=\"\" class=\"wp-image-1110\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-22-1024x148.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-22-300x43.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-22-768x111.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-22.png 1422w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u7ed9\u8f93\u5165\u6846\u6dfb\u52a0\u4e86:value \u548c @input \u4f7f\u4ed6\u5b9e\u65f6\u76d1\u542c\u5185\u5bb9\uff0c\u7136\u540e\u5c06\u5185\u5bb9\u5c01\u88c5\u4f20\u53c2\u7ed9\u4e86mutations<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&lt;input :value=&quot;count&quot; @input=&quot;handleInput&quot; type=&quot;text&quot;&gt;\n\nexport default {\n  methods: {\n    handleInput (e) {\n      \/\/ 1. \u5b9e\u65f6\u83b7\u53d6\u8f93\u5165\u6846\u7684\u503c\n      const num = +e.target.value\n      \/\/ 2. \u63d0\u4ea4mutation\uff0c\u8c03\u7528mutation\u51fd\u6570\n      this.$store.commit(&#039;changeCount&#039;, num)\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >mutations: { \n   changeCount (state, newCount) {\n      state.count = newCount\n   }\n},\n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-4\">\u8f85\u52a9\u51fd\u6570 mapMutations<\/h2>\n\n\n\n<p>mapState\u662f\u8f85\u52a9\u51fd\u6570\uff0c\u5e2e\u52a9\u6211\u4eec\u628astore\u4e2d\u7684\u6570\u636e\u6620\u5c04\u5230 \u7ec4\u4ef6\u7684\u8ba1\u7b97\u5c5e\u6027\u4e2d, \u5b83\u5c5e\u4e8e\u4e00\u79cd\u65b9\u4fbf\u7684\u7528\u6cd5<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"153\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-30-1024x153.png\" alt=\"\" class=\"wp-image-1129\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-30-1024x153.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-30-300x45.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-30-768x115.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/03\/image-30.png 1342w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc-5\">1.\u7b2c\u4e00\u6b65\uff1a\u5bfc\u5165mapState (mapState\u662fvuex\u4e2d\u7684\u4e00\u4e2a\u51fd\u6570)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >import { mapState } from &#039;vuex&#039;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc-6\">2.\u7b2c\u4e8c\u6b65\uff1a\u91c7\u7528\u6570\u7ec4\u5f62\u5f0f\u5f15\u5165state\u5c5e\u6027<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >mapState(&#091;&#039;count&#039;])<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u4e0a\u9762\u4ee3\u7801\u7684\u6700\u7ec8\u5f97\u5230\u7684\u662f <strong>\u7c7b\u4f3c\u4e8e<\/strong><\/p>\n<\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >count () {&lt;br&gt;&nbsp; &nbsp;return this.$store.state.count&lt;br&gt;}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc-7\">3.\u7b2c\u4e09\u6b65\uff1a\u5229\u7528<strong>\u5c55\u5f00\u8fd0\u7b97\u7b26<\/strong>\u5c06\u5bfc\u51fa\u7684\u72b6\u6001\u6620\u5c04\u7ed9\u8ba1\u7b97\u5c5e\u6027<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >\u00a0computed: {&lt;br&gt;\u00a0 \u00a0...mapState(&#091;&#039;count&#039;])&lt;br&gt;} <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&lt;div&gt; state\u7684\u6570\u636e\uff1a{{ count }}&lt;\/div&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u901a\u8fc7\u8f85\u52a9\u51fd\u6570 &#8211; mapState\u83b7\u53d6 state\u4e2d\u7684\u6570\u636e mapState\u662f\u8f85\u52a9\u51fd\u6570\uff0c\u5e2e\u52a9\u6211\u4eec\u628astore\u4e2d [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1111,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,5],"tags":[],"_links":{"self":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/1108"}],"collection":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1108"}],"version-history":[{"count":3,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/1108\/revisions"}],"predecessor-version":[{"id":1131,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/1108\/revisions\/1131"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/media\/1111"}],"wp:attachment":[{"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1108"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}