gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
838c7b0e96aec1e06bdd02ac2373bc1bbd4f6983
developer-roadmap/frontend/pick-a-framework:vue-js:vuex.html

21 lines
86 KiB
HTML
Raw Normal View History

Updates
2021-12-11 01:51:40 +00:00
<!DOCTYPE html><html><head><meta charSet="UTF-8"/><title>Frontend Developer Roadmap: Learn to become a modern frontend developer</title><meta name="description" content="Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development."/><meta name="author" content="Kamran Ahmed"/><meta name="keywords" content="javascript roadmap 2021,frontend roadmap 2021,frontend developer roadmap 2021,guide to becoming a developer,guide to becoming a frontend developer,frontend developer,frontend engineer,frontend skills,frontend development,javascript developer,frontend development skills,frontend development skills test,frontend roadmap,frontend engineer roadmap,frontend developer roadmap,become a frontend developer,frontend developer career path,javascript developer,modern javascript developer,node developer,skills for frontend development,learn frontend development,what is frontend development,frontend developer quiz,frontend developer interview questions"/><meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0"/><meta http-equiv="Content-Language" content="en"/><meta property="og:title" content="Frontend Developer Roadmap: Learn to become a modern frontend developer"/><meta property="og:description" content="Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development."/><meta property="og:image" content="https://roadmap.sh/brand-square.png"/><meta property="og:url" content="https://roadmap.sh"/><meta property="og:type" content="website"/><meta property="article:publisher" content="https://facebook.com/kamranahmedse"/><meta property="og:site_name" content="roadmap.sh"/><meta property="article:author" content="Kamran Ahmed"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@kamranahmedse"/><meta name="twitter:title" content="Frontend Developer Roadmap: Learn to become a modern frontend developer"/><meta name="twitter:description" content="Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development."/><meta name="twitter:image" content="https://roadmap.sh/brand-square.png"/><meta name="twitter:image:alt" content="roadmap.sh"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><link rel="apple-touch-icon" sizes="180x180" href="/manifest/apple-touch-icon.png"/><meta name="msapplication-TileColor" content="#101010"/><meta name="theme-color" content="#848a9a"/><link rel="manifest" href="/manifest/manifest.json"/><link rel="icon" type="image/png" sizes="32x32" href="/manifest/icon32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/manifest/icon16.png"/><link rel="shortcut icon" href="/manifest/favicon.ico" type="image/x-icon"/><link rel="icon" href="/manifest/favicon.ico" type="image/x-icon"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-139582634-1"></script><script>
Updates
2021-12-05 01:06:49 +00:00
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-139582634-1');
Updates
2021-12-26 10:05:39 +00:00
</script><meta name="next-head-count" content="34"/><link rel="preload" href="/_next/static/css/e04f03d5f7fd936c.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e04f03d5f7fd936c.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-378e68e29c265886.js" defer=""></script><script src="/_next/static/chunks/framework-91d7f78b5b4003c8.js" defer=""></script><script src="/_next/static/chunks/main-7e73d61bce33e887.js" defer=""></script><script src="/_next/static/chunks/pages/_app-818c56a8623519c8.js" defer=""></script><script src="/_next/static/chunks/680-be87eefc1f260b8f.js" defer=""></script><script src="/_next/static/chunks/22-5e16bc1f52d67473.js" defer=""></script><script src="/_next/static/chunks/515-03e473b12fcdafc8.js" defer=""></script><script src="/_next/static/chunks/564-488e034de771830c.js" defer=""></script><script src="/_next/static/chunks/321-b1786ff8ce0bbe8f.js" defer=""></script><script src="/_next/static/chunks/547-f266cbae5dda46b7.js" defer=""></script><script src="/_next/static/chunks/280-5be516927ff9b6fd.js" defer=""></script><script src="/_next/static/chunks/pages/%5Broadmap%5D/%5Bgroup%5D-cb1a19cd75e10c50.js" defer=""></script><script src="/_next/static/--2vSOWrx_6grU08nrx__/_buildManifest.js" defer=""></script><script src="/_next/static/--2vSOWrx_6grU08nrx__/_ssgManifest.js" defer=""></script><script src="/_next/static/--2vSOWrx_6grU08nrx__/_middlewareManifest.js" defer=""></script><style data-styled="" data-styled-version="5.3.3">.kiIUjN{line-height:27px;font-size:16px;color:black;margin-bottom:18px;}/*!sc*/
data-styled.g1[id="sc-bdvvtL"]{content:"kiIUjN,"}/*!sc*/
.dKUOdJ{position:relative;font-size:32px;line-height:40px;font-weight:700;margin:20px 0 10px !important;}/*!sc*/
Updates
2021-12-05 01:06:49 +00:00
.dKUOdJ:hover .sc-gsDKAQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/
data-styled.g3[id="sc-dkPtRN"]{content:"dKUOdJ,"}/*!sc*/
Updates
2021-12-26 10:05:39 +00:00
.jiGIaj{margin:25px -25px 25px -25px !important;padding:20px 25px !important;border-radius:10px;line-height:1.5 !important;}/*!sc*/
.jiGIaj code{background:transparent;}/*!sc*/
data-styled.g9[id="sc-furwcr"]{content:"jiGIaj,"}/*!sc*/
.gfrORe{margin-left:40px;margin-bottom:18px;}/*!sc*/
.gfrORe ul{margin-top:18px;}/*!sc*/
data-styled.g15[id="sc-egiyK"]{content:"gfrORe,"}/*!sc*/
.xTMXv{margin-bottom:7px;}/*!sc*/
data-styled.g16[id="sc-bqiRlB"]{content:"xTMXv,"}/*!sc*/
</style></head><body><div id="__next" data-reactroot=""><style data-emotion="css-global brzcv3">:host,:root{--chakra-ring-inset:var(--chakra-empty,/*!*/ /*!*/);--chakra-ring-offset-width:0px;--chakra-ring-offset-color:#fff;--chakra-ring-color:rgba(66, 153, 225, 0.6);--chakra-ring-offset-shadow:0 0 #0000;--chakra-ring-shadow:0 0 #0000;--chakra-space-x-reverse:0;--chakra-space-y-reverse:0;--chakra-colors-transparent:transparent;--chakra-colors-current:currentColor;--chakra-colors-black:#000000;--chakra-colors-white:#FFFFFF;--chakra-colors-whiteAlpha-50:rgba(255, 255, 255, 0.04);--chakra-colors-whiteAlpha-100:rgba(255, 255, 255, 0.06);--chakra-colors-whiteAlpha-200:rgba(255, 255, 255, 0.08);--chakra-colors-whiteAlpha-300:rgba(255, 255, 255, 0.16);--chakra-colors-whiteAlpha-400:rgba(255, 255, 255, 0.24);--chakra-colors-whiteAlpha-500:rgba(255, 255, 255, 0.36);--chakra-colors-whiteAlpha-600:rgba(255, 255, 255, 0.48);--chakra-colors-whiteAlpha-700:rgba(255, 255, 255, 0.64);--chakra-colors-whiteAlpha-800:rgba(255, 255, 255, 0.80);--chakra-colors-whiteAlpha-900:rgba(255, 255, 255, 0.92);--chakra-colors-blackAlpha-50:rgba(0, 0, 0, 0.04);--chakra-colors-blackAlpha-100:rgba(0, 0, 0, 0.06);--chakra-colors-blackAlpha-200:rgba(0, 0, 0, 0.08);--chakra-colors-blackAlpha-300:rgba(0, 0, 0, 0.16);--chakra-colors-blackAlpha-400:rgba(0, 0, 0, 0.24);--chakra-colors-blackAlpha-500:rgba(0, 0, 0, 0.36);--chakra-colors-blackAlpha-600:rgba(0, 0, 0, 0.48);--chakra-colors-blackAlpha-700:rgba(0, 0, 0, 0.64);--chakra-colors-blackAlpha-800:rgba(0, 0, 0, 0.80);--chakra-colors-blackAlpha-900:rgba(0, 0, 0, 0.92);--chakra-colors-gray-50:#F7FAFC;--chakra-colors-gray-100:#EDF2F7;--chakra-colors-gray-200:#E2E8F0;--chakra-colors-gray-300:#CBD5E0;--chakra-colors-gray-400:#A0AEC0;--chakra-colors-gray-500:#718096;--chakra-colors-gray-600:#4A5568;--chakra-colors-gray-700:#2D3748;--chakra-colors-gray-800:#1A202C;--chakra-colors-gray-900:#171923;--chakra-colors-red-50:#FFF5F5;--chakra-colors-red-100:#FED7D7;--chakra-colors-red-200:#FEB2B2;--chakra-colors-red-300:#FC8181;--chakra-colors-red-400:#F56565;--chakra-colors-red-500:#E53E3E;--chakra-colors-red-600:#C53030;--chakra-colors-red-700:#9B2C2C;--chakra-colors-red-800:#822727;--chakra-colors-red-900:#63171B;--chakra-colors-orange-50:#FFFAF0;--chakra-colors-orange-100:#FEEBC8;--chakra-colors-orange-200:#FBD38D;--chakra-colors-orange-300:#F6AD55;--chakra-colors-orange-400:#ED8936;--chakra-colors-orange-500:#DD6B20;--chakra-colors-orange-600:#C05621;--chakra-colors-orange-700:#9C4221;--chakra-colors-orange-800:#7B341E;--chakra-colors-orange-900:#652B19;--chakra-colors-yellow-50:#FFFFF0;--chakra-colors-yellow-100:#FEFCBF;--chakra-colors-yellow-200:#FAF089;--chakra-colors-yellow-300:#F6E05E;--chakra-colors-yellow-400:#ECC94B;--chakra-colors-yellow-500:#D69E2E;--chakra-colors-yellow-600:#B7791F;--chakra-colors-yellow-700:#975A16;--chakra-colors-yellow-800:#744210;--chakra-colors-yellow-900:#5F370E;--chakra-colors-green-50:#F0FFF4;--chakra-colors-green-100:#C6F6D5;--chakra-colors-green-200:#9AE6B4;--chakra-colors-green-300:#68D391;--chakra-colors-green-400:#48BB78;--chakra-colors-green-500:#38A169;--chakra-colors-green-600:#2F855A;--chakra-colors-green-700:#276749;--chakra-colors-green-800:#22543D;--chakra-colors-green-900:#1C4532;--chakra-colors-teal-50:#E6FFFA;--chakra-colors-teal-100:#B2F5EA;--chakra-colors-teal-200:#81E6D9;--chakra-colors-teal-300:#4FD1C5;--chakra-colors-teal-400:#38B2AC;--chakra-colors-teal-500:#319795;--chakra-colors-teal-600:#2C7A7B;--chakra-colors-teal-700:#285E61;--chakra-colors-teal-800:#234E52;--chakra-colors-teal-900:#1D4044;--chakra-colors-blue-50:#ebf8ff;--chakra-colors-blue-100:#bee3f8;--chakra-colors-blue-200:#90cdf4;--chakra-colors-blue-300:#63b3ed;--chakra-colors-blue-400:#4299e1;--chakra-colors-blue-500:#3182ce;--chakra-colors-blue-600:#2b6cb0;--chakra-colors-blue-700:#2c5282;--chakra-colors-blue-800:#2a4365;--chakra-colors-blue-900:#1A365D;--chakra-colors-cyan-50:#EDFDFD;--chakra-colors-cyan-100:#C4F1F9;--chakra-colors-cyan-200:#9DECF9;--chakra-colors-cyan-300:#76E4F7;--chakra-colors-
It is a self-contained app with the following parts:</p><ul class="sc-egiyK gfrORe"><li class="sc-bqiRlB xTMXv">The state, which is the source of truth that drives our app;</li><li class="sc-bqiRlB xTMXv">The view, which is just a declarative mapping of the state;</li><li class="sc-bqiRlB xTMXv">The actions, which are the possible ways the state could change in reaction to user inputs from the view.</li></ul><p class="sc-bdvvtL kiIUjN">If you&#x27;ve never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That&#x27;s perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple store pattern (opens new window)may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There&#x27;s a good quote from Dan Abramov, the author of Redux: </p><pre class="sc-furwcr jiGIaj"><style data-emotion="css 4m8w8z">.css-4m8w8z{display:inline-block;font-family:var(--chakra-fonts-mono);font-size:var(--chakra-fontSizes-sm);-webkit-padding-start:0.2em;padding-inline-start:0.2em;-webkit-padding-end:0.2em;padding-inline-end:0.2em;border-radius:var(--chakra-radii-sm);background:var(--chakra-colors-gray-100);color:var(--chakra-colors-gray-800);}</style><code class="chakra-code css-4m8w8z">&lt;quote&gt;Flux libraries are like glasses: you’ll know when you need them.&lt;/quote&gt;
</code></pre><style data-emotion="css 1q2yoq2">.css-1q2yoq2{margin-top:30px;margin-bottom:30px;}</style><div class="css-1q2yoq2"><style data-emotion="css 12hj1b5">.css-12hj1b5{opacity:0.6;border:0;border-color:inherit;border-style:solid;border-bottom-width:1px;width:100%;margin-bottom:15px;}</style><hr aria-orientation="horizontal" class="chakra-divider css-12hj1b5"/><style data-emotion="css 18fydfa">.css-18fydfa{line-height:23px;font-weight:500;font-size:14px;color:var(--chakra-colors-gray-500);margin-bottom:10px;}</style><p class="chakra-text css-18fydfa">This page is a work in progress. Help us by writing a small introduction to the topic and suggesting a few links to read more about this topic.</p><style data-emotion="css 1m7otm5">.css-1m7otm5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:100%;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-8);min-width:var(--chakra-sizes-8);font-size:var(--chakra-fontSizes-sm);-webkit-padding-start:var(--chakra-space-3);padding-inline-start:var(--chakra-space-3);-webkit-padding-end:var(--chakra-space-3);padding-inline-end:var(--chakra-space-3);background:var(--chakra-colors-gray-100);padding-top:20px;padding-bottom:20px;}.css-1m7otm5:focus,.css-1m7otm5[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-1m7otm5[disabled],.css-1m7otm5[aria-disabled=true],.css-1m7otm5[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-1m7otm5:hover,.css-1m7otm5[data-hover]{-webkit-text-decoration:none;text-decoration:none;background:var(--chakra-colors-gray-200);}.css-1m7otm5:active,.css-1m7otm5[data-active]{background:var(--chakra-colors-gray-300);}</style><style data-emotion="css snd3mg">.css-snd3mg{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:100%;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-8);min-width:var(--chakra-sizes-8);font-size:var(--chakra-fontSizes-sm);-webkit-padding-start:var(--chakra-space-3);padding-inline-start:var(--chakra-space-3);-webkit-padding-end:var(--chakra-space-3);padding-inline-end:var(--chakra-space-3);background:var(--chakra-colors-gray-100);padding-top:20px;padding-bottom:20px;}.css-snd3mg:hover,.css-snd3mg[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-snd3mg:focus,.css-snd3mg[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-snd3mg:focus,.cs
Reference in New Issue Copy Permalink