├── .gitignore ├── README.md ├── build.config.js ├── docs ├── client.001800a6.js ├── client.9dcefc97.css ├── clippy.svg ├── favico.png └── index.html ├── package.json ├── src ├── index.html ├── index.js └── styles │ ├── index.styl │ ├── layout.styl │ ├── modal.styl │ ├── panels.styl │ ├── tooltip.styl │ └── vars.styl ├── static ├── clippy.svg └── favico.png ├── store.example.js ├── vuex-todo.html └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vuex Complete API CheatSheet 2 | 3 | ![Vuex CheatSheet](https://cdn-images-1.medium.com/max/1776/1*jaJ6yhGVvrB96VPnSMKb_w.png) 4 | 5 | [CheatSheet](http://vuejs-tips.github.io/vuex-cheatsheet) 6 | 7 | [Original Article](https://medium.com/vuejs-tips/vuex-complete-api-cheatsheet-c581cba1eb1d) 8 | 9 | ### Korean 10 | [Repo](https://github.com/changjoo-park/vuex-cheatsheet/) 11 | 12 | [Web page](https://changjoo-park.github.io/vuex-cheatsheet/) 13 | -------------------------------------------------------------------------------- /build.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | html: { 3 | template: './src/index.html' // custom html 4 | }, 5 | webpack: { 6 | devtool: false, // disable sourcemap 7 | output: { 8 | publicPath: '' 9 | }, 10 | resolve: { 11 | alias: { 12 | '@': 'src' // shortcut to avoid ../../.. 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /docs/client.001800a6.js: -------------------------------------------------------------------------------- 1 | (function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=7)})([function(e,t,n){"use strict";function r(){document.body.classList.add("show-modal")}function i(){document.body.classList.remove("show-modal")}function a(e){27===e.keyCode&&r()}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),s=(n.n(o),n(3)),l=(n.n(s),n(6)),c=(n.n(l),n(2)),u=(n.n(c),n(5));new(n.n(u).a)(".copy"),document.addEventListener("keydown",a),document.addEventListener("click",function(e){"iframe"===e.target.getAttribute("target")&&r(),e.target.classList.contains("hide-modal")&&i()})},function(e,t){},function(e,t){},function(e,t){},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){var r,r;(function(t){e.exports=t()})(function(){var e;return function e(t,n,i){function a(s,l){if(!n[s]){if(!t[s]){var c="function"==typeof r&&r;if(!l&&c)return r(s,!0);if(o)return o(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var f=n[s]={exports:{}};t[s][0].call(f.exports,function(e){var n=t[s][1][e];return a(n?n:e)},f,f.exports,e,t,n,i)}return n[s].exports}for(var o="function"==typeof r&&r,s=0;s0&&void 0!==arguments[0]?arguments[0]:{};this.action=e.action,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function(){var e=this,t="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return e.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[t?"right":"left"]="-9999px";var n=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=n+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,r.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=(0,r.default)(this.target),this.copyText()}},{key:"copyText",value:function(){var e=void 0;try{e=document.execCommand(this.action)}catch(t){e=!1}this.handleResult(e)}},{key:"handleResult",value:function(e){this.emitter.emit(e?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(e){if(void 0!==e){if(!e||"object"!==(void 0===e?"undefined":i(e))||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&e.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(e.hasAttribute("readonly")||e.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=e}},get:function(){return this._target}}]),e}();e.exports=o})},{select:5}],8:[function(t,n,r){(function(i,a){if("function"==typeof e&&e.amd)e(["module","./clipboard-action","tiny-emitter","good-listener"],a);else if(void 0!==r)a(n,t("./clipboard-action"),t("tiny-emitter"),t("good-listener"));else{var o={exports:{}};a(o,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=o.exports}})(this,function(e,t,n,r){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t){var n="data-clipboard-"+e;if(t.hasAttribute(n))return t.getAttribute(n)}var c=i(t),u=i(n),f=i(r),d=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText}},{key:"listenClick",value:function(e){var t=this;this.listener=(0,f.default)(e,"click",function(e){return t.onClick(e)})}},{key:"onClick",value:function(e){var t=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new c.default({action:this.action(t),target:this.target(t),text:this.text(t),trigger:t,emitter:this})}},{key:"defaultAction",value:function(e){return l("action",e)}},{key:"defaultTarget",value:function(e){var t=l("target",e);if(t)return document.querySelector(t)}},{key:"defaultText",value:function(e){return l("text",e)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],t="string"==typeof e?[e]:e,n=!!document.queryCommandSupported;return t.forEach(function(e){n=n&&!!document.queryCommandSupported(e)}),n}}]),t}(u.default);e.exports=g})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)})},function(e,t,n){(function(t){var n="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},r=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,r=n.Prism={util:{encode:function(e){return e instanceof i?new i(e.type,r.util.encode(e.content),e.alias):"Array"===r.util.type(e)?e.map(r.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(b instanceof i)){u.lastIndex=0;var k=u.exec(b),w=1;if(!k&&g&&y!=a.length-1){if(u.lastIndex=v,!(k=u.exec(e)))break;for(var x=k.index+(d?k[1].length:0),E=k.index+k[0].length,A=y,S=v,T=a.length;A=S&&(++y,v=S);if(a[y]instanceof i||a[A-1].greedy)continue;w=A-y,b=e.slice(v,S),k.index-=v}if(k){d&&(p=k[1].length);var x=k.index+p,k=k[0].slice(p),E=x+k.length,j=b.slice(0,x),C=b.slice(E),O=[y,w];j&&O.push(j);var L=new i(s,f?r.tokenize(k,f):k,h,k,g);O.push(L),C&&O.push(C),Array.prototype.splice.apply(a,O)}}}}}return a},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var i,a=0;i=n[a++];)i(t)}}},i=r.Token=function(e,t,n,r,i){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!i};if(i.stringify=function(e,t,n){if("string"==typeof e)return e;if("Array"===r.util.type(e))return e.map(function(n){return i.stringify(n,t,e)}).join("");var a={type:e.type,content:i.stringify(e.content,t,n),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:n};if("comment"==a.type&&(a.attributes.spellcheck="true"),e.alias){var o="Array"===r.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(a.classes,o)}r.hooks.run("wrap",a);var s=Object.keys(a.attributes).map(function(e){return e+'="'+(a.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+(s?" "+s:"")+">"+a.content+""},!n.document)return n.addEventListener?(n.addEventListener("message",function(e){var t=JSON.parse(e.data),i=t.language,a=t.code,o=t.immediateClose;n.postMessage(r.highlight(a,r.languages[i],i)),o&&n.close()},!1),n.Prism):n.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(r.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(r.highlightAll):window.setTimeout(r.highlightAll,16):document.addEventListener("DOMContentLoaded",r.highlightAll))),n.Prism}();void 0!==e&&e.exports&&(e.exports=r),void 0!==t&&(t.Prism=r),r.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},r.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),r.languages.xml=r.languages.markup,r.languages.html=r.languages.markup,r.languages.mathml=r.languages.markup,r.languages.svg=r.languages.markup,r.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},r.languages.css.atrule.inside.rest=r.util.clone(r.languages.css),r.languages.markup&&(r.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:r.languages.css,alias:"language-css"}}),r.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:r.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:r.languages.css}},alias:"language-css"}},r.languages.markup.tag)),r.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},r.languages.javascript=r.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),r.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),r.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:r.languages.javascript}},string:/[\s\S]+/}}}),r.languages.markup&&r.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:r.languages.javascript,alias:"language-javascript"}}),r.languages.js=r.languages.javascript,function(){"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.forEach&&Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,i=t.getAttribute("data-src"),a=t,o=/\blang(?:uage)?-(?!\*)(\w+)\b/i;a&&!o.test(a.className);)a=a.parentNode;if(a&&(n=(t.className.match(o)||[,""])[1]),!n){var s=(i.match(/\.(\w+)$/)||[,""])[1];n=e[s]||s}var l=document.createElement("code");l.className="language-"+n,t.textContent="",l.textContent="Loading…",t.appendChild(l);var c=new XMLHttpRequest;c.open("GET",i,!0),c.onreadystatechange=function(){4==c.readyState&&(c.status<400&&c.responseText?(l.textContent=c.responseText,r.highlightElement(l)):c.status>=400?l.textContent="✖ Error "+c.status+" while fetching file: "+c.statusText:l.textContent="✖ Error: File does not exist or is empty")},c.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight))}()}).call(t,n(4))},function(e,t,n){e.exports=n(0)}]); -------------------------------------------------------------------------------- /docs/client.9dcefc97.css: -------------------------------------------------------------------------------- 1 | /*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}audio,embed,img,object,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}body{background-color:#21243f;color:#fff;padding-bottom:0;font-family:Source Code Pro,Helvetica,monospace;cursor:default;padding:15px}@media (max-width:1280px){body{padding:7.5px}}.columns{-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-webkit-column-count:6;-moz-column-count:6;column-count:6}@media (max-width:1600px){.columns{-webkit-column-count:5;-moz-column-count:5;column-count:5}}@media (max-width:1280px){.columns{-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:7.5px;-moz-column-gap:7.5px;column-gap:7.5px}}@media (max-width:1024px){.columns{-webkit-column-count:3;-moz-column-count:3;column-count:3}}@media (max-width:768px){.columns{-webkit-column-count:2;-moz-column-count:2;column-count:2}}@media (max-width:480px){.columns{-webkit-column-count:1;-moz-column-count:1;column-count:1}}.panel{background-color:#3c4166;border-radius:5px;overflow:hidden;display:block;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;width:100%;margin-bottom:15px}@media (max-width:1280px){.panel{margin-bottom:7.5px}}.panel h1{font-size:1.2em;border-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;padding:15px}@media (max-width:1280px){.panel h1{padding:7.5px;font-size:1.1em}}.panel h1 small{float:right}.panel ul{padding:0 0 7.5px}.panel ul a{text-decoration:none;padding:15px;color:#fff;display:block}.panel ul a:focus,.panel ul a:hover{background-color:#53587d}@media (max-width:1280px){.panel ul a{padding:7.5px}}.panel pre{padding:15px;font-size:.9em;font-family:inherit}.panel li{border-top:1px solid #1f273c}.panel li:first-child{border-top:none}.panel li span{color:#9ea8c7}.panel-entry h1{background-color:#d7616c}.panel-store li:first-child,.panel-store li:last-child{padding:7.5px}.panel-store ul li a{padding-left:22.5px}.panel-store h1{background-color:#f4b35c}.panel-maps h1{background-color:#68c3f3}.panel-instance h1{background-color:#47a4a9}.panel-context h1{background-color:#1f5393}[data-tooltip]:after{position:absolute;opacity:0;content:attr(data-tooltip);transition:opacity .25s;pointer-events:none;background:inherit;font-size:.8rem;padding:.4rem;font-weight:400;font-style:normal;color:#000;border-radius:5px;z-index:1;font-family:Helvetica}[data-tooltip]:hover:after{opacity:1}[data-tooltip]:focus:after{content:"copied!"}.copy{cursor:default;float:right;border-radius:5px;background-color:#eee}.copy img{display:block;padding:4px;width:28px;height:28px}@media (max-width:1280px){.copy img{width:24px;height:24px}}.copy:after{margin-top:-5px}#modal{visibility:hidden;pointer-events:none;background:rgba(0,0,0,.75);position:fixed;top:0;left:0;bottom:0;right:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}#modal button{z-index:2;border:1px solid silver;background-color:#fff;border-radius:50%;font-size:35px;font-family:monospace;font-weight:700;width:50px;height:50px;position:absolute;top:5px;right:5px;cursor:pointer}#modal button:hover{color:#fff;background-color:#000}#iframe{width:768px;height:100%}@media (max-width:768px){#iframe{width:100%}}.show-modal #modal{visibility:visible;pointer-events:all}a,button{outline:none}.language-javascript{background-color:transparent!important;border:none!important;box-shadow:none!important}#code-import,#code-store{position:absolute;text-indent:-1000%;font-size:0;color:transparent}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} -------------------------------------------------------------------------------- /docs/clippy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/favico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-tips/vuex-cheatsheet/debf49e84945580d299a10c78a38f31310e22c8e/docs/favico.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vuex CheatSheet 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 
import Vuex from 'vuex'
 27 | 
 28 | export default new Vuex.Store({
 29 |   strict: true,
 30 |   plugins: [],
 31 |   modules: {},
 32 |   state: {},
 33 |   getters: {},
 34 |   mutations: {},
 35 |   actions: {}
 36 | })
 37 |
38 | 39 | 
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
40 | 41 |
42 |
43 |
44 |

45 | entry.js 46 | 47 | 48 | 49 |

50 | 
import Vue from 'vue'
 51 | import Vuex from 'vuex'
 52 | import store from './store'
 53 | 
 54 | Vue.use(Vuex)
 55 | 
 56 | new Vue({
 57 |   el: '#app',
 58 |   store
 59 | })
60 |
61 | 62 |
63 |

64 | store.js 65 | 66 | 67 | 68 |

69 | 83 |
84 | 85 |
86 |

87 | import map 88 | 89 | 90 | 91 |

92 | 98 |
99 | 100 |
101 |

Instance store

102 | 108 |
109 | 110 |
111 |

Plugin Dev store

112 | 120 |
121 | 122 |
123 |

Context Object

124 | 132 |
133 |
134 |
135 | 136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuex-cheatsheet", 3 | "version": "0.1.0", 4 | "description": "Vuex Cheat Sheet", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "dev": "vue build -c build.config.js ./src/index.js", 8 | "build": "vue build -c build.config.js --dist './docs/' --prod ./src/index.js", 9 | "compile": "yarn dist -- --disable-compress" 10 | }, 11 | "keywords": ["vue", "vuex", "cheatsheet"], 12 | "author": "Marcos Neves (https://medium.com/vuejs-tips)", 13 | "license": "MIT", 14 | "dependencies": { 15 | "clipboard": "^1.6.1", 16 | "minireset.css": "^0.0.2", 17 | "prismjs": "^1.6.0" 18 | } 19 | "devDependencies": { 20 | "stylus": "^0.54.5", 21 | "stylus-loader": "^3.0.1", 22 | "webpack": "^2.3.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Vuex CheatSheet 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 
import Vuex from 'vuex'
 27 | 
 28 | export default new Vuex.Store({
 29 |   strict: true,
 30 |   plugins: [],
 31 |   modules: {},
 32 |   state: {},
 33 |   getters: {},
 34 |   mutations: {},
 35 |   actions: {}
 36 | })
 37 |
38 | 39 | 
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
40 | 41 |
42 |
43 |
44 |

45 | entry.js 46 | 47 | 48 | 49 |

50 | 
import Vue from 'vue'
 51 | import Vuex from 'vuex'
 52 | import store from './store'
 53 | 
 54 | Vue.use(Vuex)
 55 | 
 56 | new Vue({
 57 |   el: '#app',
 58 |   store
 59 | })
60 |
61 | 62 |
63 |

64 | store.js 65 | 66 | 67 | 68 |

69 | 83 |
84 | 85 |
86 |

87 | import map 88 | 89 | 90 | 91 |

92 | 98 |
99 | 100 |
101 |

Instance store

102 | 108 |
109 | 110 |
111 |

Plugin Dev store

112 | 120 |
121 | 122 |
123 |

Context Object

124 | 132 |
133 |
134 |
135 | 136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import 'minireset.css' 2 | import './styles/index.styl' 3 | import 'prismjs' 4 | import 'prismjs/themes/prism-okaidia.css' 5 | import Clipboard from 'clipboard/dist/clipboard' 6 | new Clipboard('.copy') 7 | // .on('success', console.log.bind(console)) 8 | // .on('error', console.error.bind(console)) 9 | 10 | function showModal () { 11 | document.body.classList.add('show-modal') 12 | } 13 | 14 | function hideModal () { 15 | document.body.classList.remove('show-modal') 16 | } 17 | 18 | function hideOnEsc (evt) { 19 | if (evt.keyCode === 27) { 20 | showModal() 21 | } 22 | } 23 | 24 | document.addEventListener('keydown', hideOnEsc) 25 | 26 | document.addEventListener('click', function (evt) { 27 | if (evt.target.getAttribute('target') === 'iframe') { 28 | showModal() 29 | } 30 | if (evt.target.classList.contains('hide-modal')) { 31 | hideModal() 32 | } 33 | }) 34 | -------------------------------------------------------------------------------- /src/styles/index.styl: -------------------------------------------------------------------------------- 1 | @import 'vars' 2 | @import 'layout' 3 | @import 'panels' 4 | @import 'tooltip' 5 | @import 'modal' 6 | 7 | a, button 8 | outline none 9 | 10 | .language-javascript 11 | background-color transparent !important 12 | border none !important 13 | box-shadow none !important 14 | 15 | #code-store, #code-import 16 | position absolute 17 | text-indent -1000% 18 | font-size 0 19 | color transparent 20 | -------------------------------------------------------------------------------- /src/styles/layout.styl: -------------------------------------------------------------------------------- 1 | body 2 | background-color #21243F 3 | color white 4 | padding-bottom 0 5 | font-family 'Source Code Pro', Helvetica, monospace 6 | cursor default 7 | padding padding 8 | @media (max-width laptop) 9 | padding (padding/2) 10 | 11 | .columns 12 | column-gap padding 13 | column-count 6 14 | @media (max-width desktop) 15 | column-count 5 16 | @media (max-width laptop) 17 | column-count 4 18 | column-gap (padding/2) 19 | @media (max-width netbook) 20 | column-count 3 21 | @media (max-width tablet) 22 | column-count 2 23 | @media (max-width mobile) 24 | column-count 1 25 | -------------------------------------------------------------------------------- /src/styles/modal.styl: -------------------------------------------------------------------------------- 1 | #modal 2 | visibility hidden 3 | pointer-events none 4 | background rgba(0, 0, 0, 0.75) 5 | position fixed 6 | top 0 7 | left 0 8 | bottom 0 9 | right 0 10 | display flex 11 | justify-content center 12 | 13 | button 14 | z-index 2 15 | border 1px solid silver 16 | background-color white 17 | border-radius 50% 18 | font-size 35px 19 | font-family monospace 20 | font-weight bold 21 | width 50px 22 | height 50px 23 | position absolute 24 | top 5px 25 | right 5px 26 | cursor pointer 27 | &:hover 28 | color white 29 | background-color black 30 | 31 | #iframe 32 | width 768px 33 | height 100% 34 | @media (max-width tablet) 35 | width 100% 36 | 37 | .show-modal #modal 38 | visibility visible 39 | pointer-events all 40 | -------------------------------------------------------------------------------- /src/styles/panels.styl: -------------------------------------------------------------------------------- 1 | .panel 2 | background-color #3C4166 3 | border-radius border-radius 4 | overflow hidden 5 | display block 6 | break-inside avoid 7 | width 100% 8 | margin-bottom padding 9 | @media (max-width laptop) 10 | margin-bottom (padding/2) 11 | h1 12 | font-size 1.2em 13 | border-radius border-radius 14 | border-bottom-left-radius 0 15 | border-bottom-right-radius 0 16 | padding padding 17 | @media (max-width laptop) 18 | padding (padding/2) 19 | font-size 1.1em 20 | small 21 | float right 22 | ul 23 | padding 0 0 (padding/2) 24 | a 25 | text-decoration none 26 | padding padding 27 | color white 28 | display block 29 | &:hover, &:focus 30 | background-color #53587D 31 | 32 | @media (max-width laptop) 33 | padding (padding / 2) 34 | pre 35 | padding padding 36 | font-size 0.9em 37 | font-family inherit 38 | 39 | .panel li 40 | border-top 1px solid #1F273C 41 | &:first-child 42 | border-top none 43 | span 44 | color #9EA8C7 45 | 46 | .panel-entry h1 47 | background-color #D7616C 48 | 49 | .panel-store 50 | li:first-child, li:last-child 51 | padding (padding/2) 52 | ul li a 53 | padding-left padding*1.5 54 | h1 55 | background-color #F4B35C 56 | 57 | .panel-maps h1 58 | background-color #68C3F3 59 | 60 | .panel-instance h1 61 | background-color #47A4A9 62 | 63 | .panel-context h1 64 | background-color #1F5393 65 | -------------------------------------------------------------------------------- /src/styles/tooltip.styl: -------------------------------------------------------------------------------- 1 | [data-tooltip] 2 | &:after 3 | position absolute 4 | opacity 0 5 | content attr(data-tooltip) 6 | transition opacity .25s 7 | pointer-events none 8 | background inherit 9 | font-size .8rem 10 | padding: .4rem 11 | font-weight normal 12 | font-style normal 13 | color black 14 | border-radius 5px 15 | z-index 1 16 | font-family Helvetica 17 | &:hover:after 18 | opacity 1 19 | &:focus:after 20 | content 'copied!' 21 | 22 | .copy 23 | cursor default 24 | float right 25 | border-radius 5px 26 | background-color #eee 27 | img 28 | display block 29 | padding 4px 30 | width 28px 31 | height @width 32 | @media (max-width laptop) 33 | width 24px 34 | height @width 35 | &:after 36 | margin-top -5px 37 | -------------------------------------------------------------------------------- /src/styles/vars.styl: -------------------------------------------------------------------------------- 1 | padding = 15px 2 | border-radius = 5px 3 | mobile = 480px 4 | tablet = 768px 5 | netbook = 1024px 6 | laptop = 1280px 7 | desktop = 1600px 8 | -------------------------------------------------------------------------------- /static/clippy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /static/favico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-tips/vuex-cheatsheet/debf49e84945580d299a10c78a38f31310e22c8e/static/favico.png -------------------------------------------------------------------------------- /store.example.js: -------------------------------------------------------------------------------- 1 | // store.js 2 | 3 | import Vue from 'vue' 4 | import Vuex from 'vuex' 5 | Vue.use(Vuex) 6 | 7 | const store = new Vuex.Store({ 8 | state: { 9 | todos: [] 10 | }, 11 | 12 | getters: { 13 | doneTodos (state, getters, rootState) { 14 | return state.todos.filter(todo => todo.done) 15 | }, 16 | 17 | getTodoById: (state, getters, rootState) => (id) => { 18 | return state.todos.find(todo => todo.id === id) 19 | }, 20 | 21 | getTodoById (state, getters, rootState) { 22 | return id => state.todos.find(todo => todo.id === id) 23 | } 24 | }, 25 | 26 | mutations: { 27 | addTodo (state, payload) { 28 | state.todos.push(payload) 29 | } 30 | }, 31 | 32 | actions: { 33 | addTodoSync (context, payload) { 34 | context.commit('addTodo', payload) 35 | }, 36 | 37 | addTodoAsync ({commit}, payload) { 38 | return remoteApi.addTodo(payload) 39 | .then(todo => commit('addTodo', todo)) 40 | } 41 | } 42 | }) 43 | 44 | ________________________________________________________________________________________________________________________ 45 | 46 | // https://vuex.vuejs.org/en/intro.html (imagem) 47 | 48 | // 49 | 50 | import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' 51 | 52 | export default { 53 | computed: { 54 | // this.size 55 | ...mapState(['size']), 56 | // alias this.length 57 | ...mapState({length: 'size'}), 58 | // functions 59 | ...mapState({ 60 | // fat arrow 61 | count: state => state.count, 62 | // to access local state with `this`, a normal function must be used 63 | countPlusLocalState (state) { 64 | return state.count + this.localCount 65 | } 66 | }), 67 | // getters 68 | ...mapGetters([ 69 | 'doneTodosCount', // same as this.$store. 70 | doneCount: 'doneTodosCount' // alias 71 | ]) 72 | }, 73 | 74 | methods: { 75 | // map this.increment() to this.$store.commit('increment') 76 | ...mapMutations(['increment']), 77 | // map this.add() to this.$store.commit('increment') 78 | ...mapMutations({add: 'increment'}), 79 | // Actions 80 | ...mapActions([ 81 | // this.addTodo() maps to this.$store.dispatch('addTodo') 82 | 'addTodo', 83 | // this.incrementBy(amount) maps to this.$store.dispatch('incrementBy', amount) 84 | 'incrementBy' 85 | ]), 86 | // this.add() maps to this.$store.dispatch('increment') 87 | ...mapActions({ 88 | add: 'increment' 89 | }) 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /vuex-todo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vuex TODO 6 | 7 | 8 | 9 |
10 |

All Todos

11 |
    12 |
  1. 13 | {{todo.label}} 14 |
    2. 15 |
16 |

Done Todos

17 |
    18 |
  1. 19 | {{todo.label}} 20 |
    2. 21 |
22 |
23 | 24 | 25 | 26 | 27 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | clipboard@^1.5.5, clipboard@^1.6.1: 6 | version "1.6.1" 7 | resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.6.1.tgz#65c5b654812466b0faab82dc6ba0f1d2f8e4be53" 8 | dependencies: 9 | good-listener "^1.2.0" 10 | select "^1.1.2" 11 | tiny-emitter "^1.0.0" 12 | 13 | delegate@^3.1.2: 14 | version "3.1.2" 15 | resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.2.tgz#1e1bc6f5cadda6cb6cbf7e6d05d0bcdd5712aebe" 16 | 17 | good-listener@^1.2.0: 18 | version "1.2.2" 19 | resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" 20 | dependencies: 21 | delegate "^3.1.2" 22 | 23 | minireset.css@^0.0.2: 24 | version "0.0.2" 25 | resolved "https://registry.yarnpkg.com/minireset.css/-/minireset.css-0.0.2.tgz#5f3fc8184559a9278cfe05db646fb0809cc53f02" 26 | 27 | prismjs@^1.6.0: 28 | version "1.6.0" 29 | resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365" 30 | optionalDependencies: 31 | clipboard "^1.5.5" 32 | 33 | select@^1.1.2: 34 | version "1.1.2" 35 | resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" 36 | 37 | tiny-emitter@^1.0.0: 38 | version "1.1.0" 39 | resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.1.0.tgz#ab405a21ffed814a76c19739648093d70654fecb" 40 | --------------------------------------------------------------------------------