docs__myblog__frame__vue_00.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[67],{"M/Q6":function(e,n,t){"use strict";var a=t("q1tI"),l=t.n(a);t("x8cr");function c(){return c=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},c.apply(this,arguments)}n["a"]=function(e){return l.a.createElement("div",c({className:"__dumi-default-alert"},e))}},Q1s4:function(e,n,t){"use strict";t.r(n);var a=t("q1tI"),l=t.n(a),c=t("dEAq"),r=t("M/Q6"),m=t("H1Ra"),i=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h1",{id:"vue2-\u77e5\u8bc6\u70b9"},l.a.createElement(c["AnchorLink"],{to:"#vue2-\u77e5\u8bc6\u70b9","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"vue2 \u77e5\u8bc6\u70b9"),l.a.createElement("h2",{id:"\u904d\u5386-v-for"},l.a.createElement(c["AnchorLink"],{to:"#\u904d\u5386-v-for","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u904d\u5386 v-for"),l.a.createElement("h3",{id:"\u6570\u7ec4\u904d\u5386"},l.a.createElement(c["AnchorLink"],{to:"#\u6570\u7ec4\u904d\u5386","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u6570\u7ec4\u904d\u5386"),l.a.createElement(m["a"],{code:"<template>\n  <div class=\"hello\">\n    <ul>\n      <li v-for=\"(item,index) in list\">{{index+1}}\u3001{{item.title}}</li>\n    </ul>\n  </div>\n</template>\n\n<script type='javascript'>\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String\n  },\n  data(){\n    return{\n      list:[{title:'\u6d4b\u8bd5\u6570\u636e1'},{title:'\u6d4b\u8bd5\u6570\u636e2'}]\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n\n</style>",lang:"js"}),l.a.createElement("h3",{id:"\u5bf9\u8c61\u904d\u5386"},l.a.createElement(c["AnchorLink"],{to:"#\u5bf9\u8c61\u904d\u5386","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5bf9\u8c61\u904d\u5386"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"value")," \u662f\u503c"),l.a.createElement("li",null,l.a.createElement("code",null,"key")," \u662f\u952e"),l.a.createElement("li",null,l.a.createElement("code",null,"index")," \u662f\u5e8f\u53f7")),l.a.createElement(m["a"],{code:"<template>\n  <div class=\"hello\">\n    <ul>\n      <li v-for=\"(value,key,index) in obj\">{{value}}\u3001{{key}}\u3001{{index}}</li>\n    </ul>\n  </div>\n</template>\n\n<script type='javascript'>\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String\n  },\n  data(){\n    return{\n      obj:{\n        name:'vue',\n        age:5\n      }\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n\n</style>",lang:"js"}),l.a.createElement("p",null,l.a.createElement(r["a"],null,"\u6ce8\u610f\uff1a\u4f7f\u7528 ",l.a.createElement("code",null,"v-for"),"\u65f6\u8981\u5e26\u4e0a",l.a.createElement("code",null,":key"),"\u5c5e\u6027 ,",l.a.createElement("code",null,"v-for"),"\u4e5f\u53ef\u4ee5\u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027",l.a.createElement("code",null,"computed"))),l.a.createElement("p",null,l.a.createElement("code",null,"example"),":"),l.a.createElement(m["a"],{code:"<template>\n  <div class=\"hello\">\n    <input type='radio'  v-model=\"type\" value=\"boy\"/>\u7537\u751f\n    <input type='radio'  v-model=\"type\" value=\"girl\"/>\u5973\u751f\n    <ul>\n      <li v-for=\"(item ,index) in filterData\">{{item.name}}</li>\n    </ul>\n  </div>\n</template>\n\n<script type='javascript'>\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String\n  },\n  data(){\n    return{\n      type:'all',\n      user:[\n        {name:'\u5c0f\u660e',sex:'boy'},\n        {name:'\u5c0f\u5f3a',sex:'boy'},\n        {name:'\u5c0f\u4e3d',sex:'girl'},\n        {name:'\u5c0f\u6885',sex:'girl'}\n      ]\n    }\n  },\n  computed:{\n    filterData(){\n      if(this.type=='all'){\n        return this.user;\n      }else{\n        return this.user.filter(v=>v.sex===this.type)\n      }\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n\n</style>",lang:"js"}),l.a.createElement("ul",null,l.a.createElement("li",null,"\u6570\u7ec4\u66f4\u65b0\uff1a",l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"$set"),":\u5b9e\u4f8b\u65b9\u6cd5"),l.a.createElement("li",null,l.a.createElement("code",null,"push")),l.a.createElement("li",null,l.a.createElement("code",null,"pop")),l.a.createElement("li",null,l.a.createElement("code",null,"shift")),l.a.createElement("li",null,l.a.createElement("code",null,"unshift")),l.a.createElement("li",null,l.a.createElement("code",null,"spice")),l.a.createElement("li",null,l.a.createElement("code",null,"sort")),l.a.createElement("li",null,l.a.createElement("code",null,"reverse")))),l.a.createElement("li",null,"\u5bf9\u8c61\u66f4\u65b0\uff1a",l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Object.assign"),":\u53ef\u4ee5\u589e\u52a0\u591a\u4e2a\u503c")))),l.a.createElement("h2",{id:"\u8ba1\u7b97\u5c5e\u6027-computed-\u548c\u4fa6\u542c\u5c5e\u6027-watch"},l.a.createElement(c["AnchorLink"],{to:"#\u8ba1\u7b97\u5c5e\u6027-computed-\u548c\u4fa6\u542c\u5c5e\u6027-watch","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u8ba1\u7b97\u5c5e\u6027 computed \u548c\u4fa6\u542c\u5c5e\u6027 watch"),l.a.createElement("p",null,"\u8ba1\u7b97\u5c5e\u6027",l.a.createElement("code",null,"computed"),"\u548c\u4fa6\u542c\u5c5e\u6027",l.a.createElement("code",null,"watch"),"\u90fd\u53ef\u4ee5\u5b9e\u73b0\u7f13\u5b58\uff0c\u65b9\u6cd5\u4e0d\u80fd\u5b9e\u73b0\u7f13\u5b58\u3002"),l.a.createElement("p",null,"\u4e00\u4e2a\u529f\u80fd\u65e2\u53ef\u4ee5\u4f7f\u7528",l.a.createElement("code",null,"watch"),"\u5b9e\u73b0\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528",l.a.createElement("code",null,"computed"),"\u5b9e\u73b0\uff0c\u5219\u4f18\u5148\u4f7f\u7528\u8ba1\u7b97\u5c5e\u6027",l.a.createElement("code",null,"computed")),l.a.createElement("ul",null,l.a.createElement("li",null,"\u4e00\u5bf9\u591a\uff1a",l.a.createElement("code",null,"computed")),l.a.createElement("li",null,"\u591a\u5bf9\u4e00\uff1a",l.a.createElement("code",null,"watch"))),l.a.createElement("p",null,"\u5982\u679c\u4e0d\u5e0c\u671b\u6709\u7f13\u5b58\u5219\u53ef\u4ee5\u7528\u65b9\u6cd5\u6765\u66ff\u4ee3"),l.a.createElement("h3",{id:"computed"},l.a.createElement(c["AnchorLink"],{to:"#computed","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"computed"),l.a.createElement("p",null,"\u652f\u6301\u7f13\u5b58\uff0c\u53ea\u6709\u4f9d\u8d56\u6570\u636e\u53d1\u751f\u6539\u53d8\uff0c\u624d\u4f1a\u91cd\u65b0\u8fdb\u884c\u8ba1\u7b97"),l.a.createElement(m["a"],{code:"<template>\n  <div class=\"hello\">\n    <p>{{fullName}} </p>\n    \u59d3\uff1a<input v-model='firstName'>\n    \u540d\uff1a<input v-model='lastName'/>\n  </div>\n</template>\n\n<script type='javascript'>\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String\n  },\n  data(){\n    return{\n      firstName:'tian',\n      lastName:'xiaoxiao'\n    }\n  },\n  computed:{\n    fullName(){\n      return this.firstName+' '+this.lastName\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n\n</style>",lang:"js"}),l.a.createElement("h3",{id:"watch"},l.a.createElement(c["AnchorLink"],{to:"#watch","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"watch"),l.a.createElement("p",null,"\u4e0d\u652f\u6301\u7f13\u5b58\uff0c\u6570\u636e\u53d8\uff0c\u76f4\u63a5\u4f1a\u89e6\u53d1\u76f8\u5e94\u7684\u64cd\u4f5c"),l.a.createElement("p",null,"\u5f53\u9700\u8981\u5728\u6570\u636e\u53d8\u5316\u65f6\u6267\u884c\u5f02\u6b65\u6216\u5f00\u9500\u8f83\u5927\u7684\u64cd\u4f5c\u65f6\uff0c\u8fd9\u4e2a\u65b9\u5f0f\u662f\u6700\u6709\u7528\u7684"),l.a.createElement("h2",{id:"\u4e8b\u4ef6\u4fee\u9970\u7b26"},l.a.createElement(c["AnchorLink"],{to:"#\u4e8b\u4ef6\u4fee\u9970\u7b26","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4e8b\u4ef6\u4fee\u9970\u7b26"),l.a.createElement("ul",null,l.a.createElement("li",null,".stop"),l.a.createElement("li",null,".self"),l.a.createElement("li",null,".once"),l.a.createElement("li",null,".prevent")),l.a.createElement("h2",{id:"\u6309\u952e\u4fee\u9970\u7b26"},l.a.createElement(c["AnchorLink"],{to:"#\u6309\u952e\u4fee\u9970\u7b26","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u6309\u952e\u4fee\u9970\u7b26"),l.a.createElement("ul",null,l.a.createElement("li",null,".enter"),l.a.createElement("li",null,".tab -.esc -.up -.left -.right")),l.a.createElement("h2",{id:"\u7ec4\u4ef6\u4f20\u503c"},l.a.createElement(c["AnchorLink"],{to:"#\u7ec4\u4ef6\u4f20\u503c","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u7ec4\u4ef6\u4f20\u503c"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u7236\u4f20\u5b50 ",l.a.createElement("code",null,"props")),l.a.createElement("li",null,"\u5b50\u4f20\u7236 ",l.a.createElement("code",null,"$emit")),l.a.createElement("li",null,"\u5144\u5f1f\u7ec4\u4ef6 ",l.a.createElement("code",null,"bus\u4e2d\u592e\u4e8b\u4ef6\u603b\u7ebf")),l.a.createElement("li",null,l.a.createElement("code",null,"vuex"))),l.a.createElement("h2",{id:"\u63d2\u69fd-slot"},l.a.createElement(c["AnchorLink"],{to:"#\u63d2\u69fd-slot","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u63d2\u69fd slot"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u666e\u901a\u63d2\u69fd"),l.a.createElement("li",null,"\u5177\u540d\u63d2\u69fd v-slot \u5fc5\u987b\u4f5c\u7528\u5728 template \u4e0a"),l.a.createElement("li",null,"\u4f5c\u7528\u57df\u63d2\u69fd \u8ba9\u63d2\u69fd\u5185\u5bb9\u53ef\u4ee5\u8bbf\u95ee\u5230\u5b50\u7ec4\u4ef6\u624d\u6709\u7684\u6570\u636e")),l.a.createElement("h2",{id:"\u52a8\u6001\u7ec4\u4ef6-component"},l.a.createElement(c["AnchorLink"],{to:"#\u52a8\u6001\u7ec4\u4ef6-component","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u52a8\u6001\u7ec4\u4ef6 component"),l.a.createElement("component",{is:""},l.a.createElement("h2",{id:"\u7ec4\u4ef6\u7f13\u5b58keep-alive"},l.a.createElement(c["AnchorLink"],{to:"#\u7ec4\u4ef6\u7f13\u5b58keep-alive","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u7ec4\u4ef6\u7f13\u5b58\uff1a",l.a.createElement("code",null,"keep-alive")),l.a.createElement("p",null,"keep-alive \u7528\u4e8e\u4fdd\u5b58\u7ec4\u4ef6\u7684\u6e32\u67d3\u72b6\u6001"),l.a.createElement("p",null,"\u4f7f\u7528\u4e86 keep-alive \u7684\u4e4b\u540e\u53ef\u4ee5\u4f7f\u7528\u7684\u751f\u547d\u5468\u671f\uff1a"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"activated")," \u9875\u9762\u5904\u4e8e\u6fc0\u6d3b\u72b6\u6001\u65f6\u8c03\u7528,\u9875\u9762\u7b2c\u4e00\u6b21\u8fdb\u5165\u7684\u65f6\u5019\uff0c\u94a9\u5b50\u89e6\u53d1\u7684\u987a\u5e8f\u662f",l.a.createElement("code",null,"created"),"->",l.a.createElement("code",null,"mounted"),"->",l.a.createElement("code",null,"activated")),l.a.createElement("li",null,l.a.createElement("code",null,"deactivated"),"\u9875\u9762\u9000\u51fa\u7684\u65f6\u5019\u4f1a\u89e6\u53d1",l.a.createElement("code",null,"deactivated"),"\uff0c\u5f53\u518d\u6b21\u524d\u8fdb\u6216\u8005\u540e\u9000\u7684\u65f6\u5019\u53ea\u89e6\u53d1",l.a.createElement("code",null,"activated"))),l.a.createElement("h2",{id:"\u8def\u7531"},l.a.createElement(c["AnchorLink"],{to:"#\u8def\u7531","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u8def\u7531"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,"\u52a8\u6001\u8def\u7531")),l.a.createElement("li",null,l.a.createElement("p",null,"\u5d4c\u5957\u8def\u7531")),l.a.createElement("li",null,l.a.createElement("p",null,"\u547d\u540d\u8def\u7531")),l.a.createElement("li",null,l.a.createElement("p",null,"\u7f16\u7a0b\u5f0f\u5bfc\u822a")),l.a.createElement("li",null,l.a.createElement("p",null,"\u8def\u7531\u4f20\u53c2")),l.a.createElement("li",null,l.a.createElement("p",null,"\u8def\u7531\u5b88\u536b"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u5168\u5c40\u94a9\u5b50\u51fd\u6570 beforeEach(to,from,next)\u3001next()\u3001next(false)\u3001next('/login')"),l.a.createElement("li",null,"\u6743\u9650\u63a7\u5236"),l.a.createElement("li",null,"\u7ec4\u4ef6\u5185\u94a9\u5b50\u51fd\u6570",l.a.createElement("ul",null,l.a.createElement("li",null,"beforeRouteEnter(to,from,next) \u5b9e\u4f8b\u6ca1\u6709\u88ab\u521b\u5efa"),l.a.createElement("li",null,"beforeRouteUpdate"),l.a.createElement("li",null,"beforeRiuteleave")))))),l.a.createElement("h2",{id:"vuex"},l.a.createElement(c["AnchorLink"],{to:"#vuex","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"vuex"),l.a.createElement("h3",{id:"\u4ec0\u4e48\u662f-vuex"},l.a.createElement(c["AnchorLink"],{to:"#\u4ec0\u4e48\u662f-vuex","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4ec0\u4e48\u662f vuex"),l.a.createElement("p",null,"\u72b6\u6001\u7ba1\u7406,\u53ef\u8ffd\u8e2a\u3001\u53ef\u9884\u6d4b,\u4ed3\u5e93"),l.a.createElement("h3",{id:"\u4e3a\u4ec0\u4e48\u7528-vuex"},l.a.createElement(c["AnchorLink"],{to:"#\u4e3a\u4ec0\u4e48\u7528-vuex","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4e3a\u4ec0\u4e48\u7528 vuex"),l.a.createElement("p",null,"\u6ca1\u6709\u5173\u7cfb\u7ec4\u4ef6\u4e4b\u95f4\u7684\u4f20\u503c\u5bfc\u81f4\u7ba1\u7406\u6bd4\u8f83\u6df7\u4e71\uff0c\u6240\u4ee5\u7528 vuex \u7ba1\u7406\uff0c\u5b83\u4e0d\u662f\u5fc5\u987b\u7684\uff0c\u9002\u5408\u5927\u578b\u9879\u76ee"),l.a.createElement("h3",{id:"\u5b89\u88c5\u914d\u7f6e"},l.a.createElement(c["AnchorLink"],{to:"#\u5b89\u88c5\u914d\u7f6e","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5b89\u88c5\u914d\u7f6e"),l.a.createElement(m["a"],{code:"# \u5b89\u88c5\nnpm install vuex --save\n# \u914d\u7f6e\n/src/store/index.js",lang:"bash"}),l.a.createElement(m["a"],{code:'//vue2 store.js\nimport Vue from "vue";\nimport Vuex from "vuex";\n\nVue.use(Vuex);\n\nconst moduleA = {\n  state: {\n    name: "m1",\n  },\n  mutations: {},\n  getters: {},\n};\nconst moduleB = {\n  state: {\n    name: "m2",\n  },\n  mutations: {},\n  getters: {},\n};\n\nexport default new Vuex.Store({\n  state: {\n    count: 10,\n    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  }, //\u72b6\u6001\n  getters: {\n    //\u8ba1\u7b97\u5c5e\u6027\n    filterList: (state) => {\n      return state.list.filter((item) => item % 2 === 0);\n    },\n  },\n  //\u5bf9\u6570\u636e\u7684\u66f4\u6539,\u552f\u4e00\u6539\u53d8\u6570\u636e\u7684\u65b9\u5f0f\uff0c\u4e0d\u5141\u8bb8\u6709\u5f02\u6b65\u64cd\u4f5c\n  mutations: {\n    add(state) {\n      //\u53ef\u4ee5\u63d0\u4f9b\u989d\u5916\u7684\u53c2\u6570\n      state.count++;\n    },\n    reduce(state) {\n      state.count--;\n    },\n    //\u4f7f\u7528 this.$store.commit(\'add\')\uff0c\u63a8\u8350\u4f7f\u7528\u4f20\u5bf9\u8c61\u7684\u65b9\u5f0fthis.$store.commit(\'add\',{num:100})\n    //\u6dfb\u52a0\u4e4b\u524dstate\u6ca1\u6709\u8bbe\u7f6e\u7684key\u503c\n    addNewState() {\n      //\u4e0b\u9762\u662f\u76f8\u5f53\u4e8e\u65b0\u589e\u4e00\u4e2a\u952e\u503c\n      Vue.set(state, "newState", "\u6211\u662f\u65b0\u5c5e\u6027");\n      //\u4e0b\u9762\u76f8\u5f53\u4e8e\u66ff\u6362\u4e00\u4e2a\u65b0\u7684state\u5bf9\u8c61\n      this.replaceState({ ...state, newState: "\u6211\u662f\u65b0\u5c5e\u6027" });\n    },\n    changeCount(state, newState) {\n      return (state.count = newState.count);\n    },\n  },\n  actions: {\n    //\u4f7f\u7528 this.$store.dispatch(\'modified\')\n    modified({ commit }) {\n      commit("changeCount", await getData());\n    },\n  }, //\u5f02\u6b65\u5904\u7406\n  modules: {\n    //\u58f0\u660e\u6a21\u5757\n    m1: moduleA,\n    m2: moduleB,\n  },\n});',lang:"js"}),l.a.createElement("h3",{id:"api"},l.a.createElement(c["AnchorLink"],{to:"#api","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"api"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"state")," \u548c ",l.a.createElement("code",null,"mapState"),"\u53ef\u4ee5\u4f7f\u7528",l.a.createElement("code",null,"this.$store.state"),"\u6765\u83b7\u53d6\u6570\u636e\uff0c\u5f53\u4e00\u4e2a\u7ec4\u4ef6\u9700\u8981\u83b7\u53d6\u591a\u4e2a\u72b6\u6001\u7684\u65f6\u5019\uff0c\u5c06\u8fd9\u4e9b\u72b6\u6001\u90fd\u58f0\u660e\u4e3a\u8ba1\u7b97\u5c5e\u6027\u4f1a\u6709\u4e9b\u91cd\u590d\u548c\u5197\u4f59\uff0c\u53ef\u4ee5\u4f7f\u7528 ",l.a.createElement("code",null,"mapState")," \u6765\u4fbf\u4e8e\u6211\u4eec\u4f7f\u7528"),l.a.createElement(m["a"],{code:"computed:{\n  ... mapState([\n    // \u6620\u5c04 this.count \u4e3a store.state.count\n    \"count\",\n  ]);\n}\n//\u53ef\u4ee5\u4f7f\u7528\u51fd\u6570\ncomputed:{\n  ... mapState(['count':(state)=>{return state.count}]);\n}",lang:"js"})),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"getter"),"\u548c",l.a.createElement("code",null,"mapGetter")," \u4e3b\u8981\u662f\u5bf9\u72b6\u6001\u7684\u5904\u7406"),l.a.createElement(m["a"],{code:"//\u6b63\u5e38\u4f7f\u7528\ncomputed:{\n  ... mapGetters([\n    \"filterList\",\n  ]);\n}\n//\u53d6\u522b\u540d\ncomputed:{\n  ... mapGetters([{num:'filterList'}]);\n}",lang:"js"})),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"mutations"),"\u548c",l.a.createElement("code",null,"mapMutations")," \u66f4\u6539 Vuex \u7684 store \u4e2d\u7684\u72b6\u6001\u7684\u552f\u4e00\u65b9\u6cd5\u662f\u63d0\u4ea4 mutation\uff0c\u5fc5\u987b\u662f\u540c\u6b65\u51fd\u6570"),l.a.createElement(m["a"],{code:"mutations:{\n  increment (state) {\n    // \u53d8\u66f4\u72b6\u6001\n    state.count++\n  }\n}",lang:"js"})),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"action"),"\u548c",l.a.createElement("code",null,"mapAction")," \u5f02\u6b65\u64cd\u4f5c"))),l.a.createElement(m["a"],{code:"actions: {\n  checkout ({ commit, state }, products) {\n    // \u628a\u5f53\u524d\u8d2d\u7269\u8f66\u7684\u7269\u54c1\u5907\u4efd\u8d77\u6765\n    const savedCartItems = [...state.cart.added]\n    // \u53d1\u51fa\u7ed3\u8d26\u8bf7\u6c42\uff0c\u7136\u540e\u4e50\u89c2\u5730\u6e05\u7a7a\u8d2d\u7269\u8f66\n    commit(types.CHECKOUT_REQUEST)\n    // \u8d2d\u7269 API \u63a5\u53d7\u4e00\u4e2a\u6210\u529f\u56de\u8c03\u548c\u4e00\u4e2a\u5931\u8d25\u56de\u8c03\n    shop.buyProducts(\n      products,\n      // \u6210\u529f\u64cd\u4f5c\n      () => commit(types.CHECKOUT_SUCCESS),\n      // \u5931\u8d25\u64cd\u4f5c\n      () => commit(types.CHECKOUT_FAILURE, savedCartItems)\n    )\n  }\n}",lang:"js"}))))}));n["default"]=e=>{var n=l.a.useContext(c["context"]),t=n.demos;return l.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(i,{demos:t})}},x8cr:function(e,n,t){}}]);