{"id":5653,"date":"2025-11-16T11:00:33","date_gmt":"2025-11-16T07:30:33","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=5653"},"modified":"2025-11-17T11:50:49","modified_gmt":"2025-11-17T08:20:49","slug":"%da%86%da%af%d9%88%d9%86%d9%87-%d8%a8%d8%a7-vue-js-devtools-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%d8%8c-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d9%88-%d8%a7%db%8c%d9%88%d9%86","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%da%86%da%af%d9%88%d9%86%d9%87-%d8%a8%d8%a7-vue-js-devtools-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%d8%8c-%d9%88%d8%b6%d8%b9%db%8c%d8%aa-%d9%88-%d8%a7%db%8c%d9%88%d9%86\/","title":{"rendered":"\u0686\u06af\u0648\u0646\u0647 \u0628\u0627 Vue.js Devtools \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u060c \u0648\u0636\u0639\u06cc\u062a \u0648 \u0627\u06cc\u0648\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u062f\u06cc\u0628\u0627\u06af \u06a9\u0646\u06cc\u0645\u061f"},"content":{"rendered":"<div>\n<p>\u0628\u0631\u0627\u06cc \u062f\u06cc\u0628\u0627\u06af \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Vue\u060c \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627\u06cc\u062f \u0628\u06cc\u0646 \u06a9\u062f \u0645\u0646\u0628\u0639 \u0648 \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u062f \u0648 \u0628\u062f\u0644 \u0634\u0648\u06cc\u062f \u0648 \u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0633\u0631\u0648\u0631 \u0631\u0627 \u0645\u062c\u062f\u062f \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0632\u0645\u0627\u0646\u200c\u0628\u0631 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u062f\u06cc\u0628\u0627\u06af\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627\u0646\u0646\u062f Vue.js Devtools \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>Vue.js Devtools \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0627\u06cc Chrome \u0648 Firefox \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u0633\u062a\u0642\u0644 Electron \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 Guillaume Chau \u0648 Evan You \u0627\u0632 \u062a\u06cc\u0645 \u0627\u0635\u0644\u06cc Vue.js \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0646\u0645\u0627\u06cc \u0628\u0635\u0631\u06cc \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0627\u062e\u0644\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Vue \u0634\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647 \u0648 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06a9\u0634\u0646\u200c\u0647\u0627\u060c \u06af\u062a\u0631\u0647\u0627 \u0648 \u0645\u06cc\u0648\u062a\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc Vuex \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0627\u06cc\u06cc\u062f.<\/p>\n<p>\u0628\u0627 Devtools \u0634\u0645\u0627 \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0648 \u0686\u0647 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc (payload) \u062f\u0627\u0634\u062a\u0647 \u0627\u0633\u062a. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0634\u0628\u06cc\u0647 DOM \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0627\u0646\u0646\u062f \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c computed properties \u0648 props \u0631\u0627 \u062a\u062d\u0644\u06cc\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0646\u0645\u0648\u0646\u0647 Vue \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0627\u0641\u0632\u0648\u0646\u0647 Vue.js Devtools \u0631\u0627 \u0646\u0635\u0628 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0633\u067e\u0633 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0647 \u0627\u067e \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u062a\u0633\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0628\u062a\u062f\u0627 \u0627\u0628\u062a\u062f\u0627\u06cc \u0645\u0633\u06cc\u0631 \u062f\u06cc\u0628\u0627\u06af \u06a9\u0631\u062f\u0646 \u06a9\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js Devtools \u0627\u0633\u062a.<\/p>\n<h3>\u0645\u0631\u062d\u0644\u0647 \u0627\u0648\u0644: \u0627\u06cc\u062c\u0627\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0646\u0645\u0648\u0646\u0647 Vue<\/h3>\n<p>\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062c\u062f\u06cc\u062f Vue \u0628\u0627 Vue CLI \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<pre>npm create vue@latest\r\n<\/pre>\n<p>\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u060c \u06af\u0632\u06cc\u0646\u0647 Manually select features \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 Choose Vue version\u060c Babel \u0648 Vuex \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u06a9\u0644\u06cc\u062f ENTER \u0631\u0627 \u0632\u062f\u0647 \u0648 \u0628\u0627\u0642\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u06cc\u0627 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062e\u0648\u062f \u067e\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0648\u0642\u062a\u06cc \u067e\u0631\u0648\u0698\u0647 favorite-airports \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u060c \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0634\u0627\u062e\u0647 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0648\u06cc\u062f:<\/p>\n<pre>cd favorite-airports\r\n<\/pre>\n<p>\u0633\u067e\u0633 \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0633\u0627\u0632\u06cc\u062f:<\/p>\n<pre>mkdir src\/data\r\n<\/pre>\n<p>\u062f\u0631 \u0627\u062f\u06cc\u062a\u0648\u0631 \u0645\u062a\u0646\u06cc \u062e\u0648\u062f \u0641\u0627\u06cc\u0644\u06cc \u0628\u0647 \u0646\u0627\u0645 <strong>src\/data\/airports.js<\/strong> \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<pre>export default [\r\n  {\r\n    name: \"Cincinnati\/Northern Kentucky International Airport\",\r\n    abbreviation: \"CVG\",\r\n    city: \"Hebron\",\r\n    state: \"KY\",\r\n    construction: false\r\n  },\r\n  {\r\n    name: \"John Glenn Columbus International Airport\",\r\n    abbreviation: \"CMH\",\r\n    city: \"Columbus\",\r\n    state: \"OH\",\r\n    construction: false\r\n  },\r\n  {\r\n    name: \"Chicago O'Hare International Airport\",\r\n    abbreviation: \"ORD\",\r\n    city: \"Chicago\",\r\n    state: \"IL\",\r\n    construction: true\r\n  },\r\n  {\r\n    name: \"Southwest Florida International Airport\",\r\n    abbreviation: \"RSW\",\r\n    city: \"Fort Myers\",\r\n    state: \"FL\",\r\n    construction: false\r\n  },\r\n  {\r\n    name: \"Hartsfield-Jackson Atlanta International Airport\",\r\n    abbreviation: \"ATL\",\r\n    city: \"Atlanta\",\r\n    state: \"GA\",\r\n    construction: false\r\n  },\r\n  {\r\n    name: \"Northwest Arkansas National Airport\",\r\n    abbreviation: \"XNA\",\r\n    city: \"Fayetteville\",\r\n    state: \"AR\",\r\n    construction: false\r\n  }\r\n];\r\n<\/pre>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0686\u0646\u062f \u0641\u0631\u0648\u062f\u06af\u0627\u0647 \u062f\u0631 \u0627\u06cc\u0627\u0644\u0627\u062a \u0645\u062a\u062d\u062f\u0647 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u060c \u0642\u0631\u0627\u0631 \u0627\u0633\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc\u06cc \u0634\u0627\u0645\u0644 \u0646\u0627\u0645\u060c \u0627\u062e\u062a\u0635\u0627\u0631\u060c \u0634\u0647\u0631 \u0648 \u0627\u06cc\u0627\u0644\u062a \u0628\u0633\u0627\u0632\u06cc\u062f. \u0627\u06cc\u0646 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u062c\u0647\u062a \u0628\u0631\u0631\u0633\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0622\u0646\u200c\u0647\u0627 \u062f\u0631 Vue.js Devtools \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f.<\/p>\n<p>\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0633\u067e\u0633 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u06a9 \u0641\u0627\u06cc\u0644 (SFC) \u0628\u0647 \u0646\u0627\u0645 <strong>AirportCard.vue<\/strong> \u062f\u0631 \u067e\u0648\u0634\u0647 components \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n<p>\u0641\u0627\u06cc\u0644 <strong>components\/AirportCard.vue<\/strong> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n<pre>&lt;template&gt;\r\n  &lt;div class=\"airport\" @click=\"$emit('favorite-airport', airport)\" :class=\"{ 'is-under-construction': airport.construction }\"&gt;\r\n    &lt;p class=\"abbr\"&gt;{{ airport.abbreviation }}&lt;\/p&gt;\r\n    &lt;p class=\"name\"&gt;{{ airport.name }}&lt;\/p&gt;\r\n    &lt;p class=\"city-state\"&gt;{{ airport.city }}, {{ airport.state }}&lt;\/p&gt;\r\n    &lt;p v-if=\"airport.construction\" class=\"construction\"&gt;Under Construction&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  name: \"AirportCard\",\r\n  props: {\r\n    airport: {\r\n      type: Object,\r\n      required: true\r\n    }\r\n  }\r\n};\r\n&lt;\/script&gt;\r\n\r\n&lt;style scoped&gt;\r\n.airport {\r\n  border: 1px solid black;\r\n  padding: 1rem;\r\n  margin-bottom: 1rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.airport p:first-child {\r\n  font-weight: bold;\r\n  font-size: 1.5rem;\r\n}\r\n\r\n.airport p:last-child {\r\n  font-style: italic;\r\n  color: gray;\r\n}\r\n\r\n.is-under-construction {\r\n  border-color: red;\r\n  color: red;\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c \u06cc\u06a9 <code>prop<\/code> \u0628\u0647 \u0646\u0627\u0645 airport \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u06a9\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0648\u0627\u0644\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f <code>click<\/code> \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0633\u0641\u0627\u0631\u0634\u06cc <code>favorite-airport<\/code> \u0628\u0627 payload \u062f\u0627\u062f\u0647 \u0641\u0631\u0648\u062f\u06af\u0627\u0647 \u0628\u0647 \u0648\u0627\u0644\u062f \u0627\u0631\u0633\u0627\u0644 \u0634\u0648\u062f. \u062f\u0631 CSS \u0647\u0645 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u062a \u0641\u0631\u0648\u062f\u06af\u0627\u0647 \u0648 \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u062e\u0627\u0635 \u0627\u0632 \u062c\u0645\u0644\u0647 \u0648\u0642\u062a\u06cc \u0641\u0631\u0648\u062f\u06af\u0627\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u0627\u0633\u062a \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631 \u0627\u062f\u0627\u0645\u0647\u060c \u062f\u0631 \u0641\u0627\u06cc\u0644 <strong>App.vue<\/strong> \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0642\u0628\u0644\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<pre>&lt;template&gt;\r\n  &lt;div id=\"app\"&gt;\r\n    &lt;AirportCard\r\n      v-for=\"airport in airports\"\r\n      :key=\"airport.abbreviation\"\r\n      :airport=\"airport\"\r\n      @favorite-airport=\"addToFavorites\"\r\n    \/&gt;\r\n\r\n    &lt;div v-if=\"favorites.length\"&gt;\r\n      &lt;h2&gt;Favorite Airports&lt;\/h2&gt;\r\n      &lt;AirportCard\r\n        v-for=\"airport in favorites\"\r\n        :key=\"airport.abbreviation\"\r\n        :airport=\"airport\"\r\n      \/&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script&gt;\r\nimport airports from \".\/data\/airports.js\";\r\nimport AirportCard from \".\/components\/AirportCard.vue\";\r\nimport { mapState, mapActions } from \"vuex\";\r\n\r\nexport default {\r\n  name: \"App\",\r\n  components: {\r\n    AirportCard\r\n  },\r\n  computed: {\r\n    ...mapState([\"favorites\"]),\r\n    airports() {\r\n      return airports;\r\n    }\r\n  },\r\n  methods: {\r\n    ...mapActions([\"addToFavorites\"])\r\n  }\r\n};\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062f\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 v-for \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0648\u062f\u06af\u0627\u0647 \u0627\u0632 \u0622\u0631\u0627\u06cc\u0647 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0633\u0627\u062e\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0631\u0648\u06cc\u062f\u0627\u062f \u0633\u0641\u0627\u0631\u0634\u06cc <code>favorite-airport<\/code> \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u062a \u06a9\u0644\u06cc\u06a9 \u0634\u0648\u062f \u0628\u0627 action Vuex \u0645\u0631\u062a\u0628\u0637 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u062e\u0634 \u062c\u062f\u0627\u06af\u0627\u0646\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0641\u0631\u0648\u062f\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0645\u0646\u062a\u062e\u0628 \u06a9\u0627\u0631\u0628\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<p>\u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre>npm run serve\r\n<\/pre>\n<p>\u0627\u06cc\u0646 \u0633\u0631\u0648\u0631 \u0631\u0648\u06cc <code>localhost:8080<\/code> \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0627\u06cc\u0646 \u0622\u062f\u0631\u0633 \u0628\u0631\u0648\u06cc\u062f. \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0648\u062f\u06af\u0627\u0647 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n<h3>\u0646\u0635\u0628 Vue.js Devtools<\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vue.js Devtools \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0627\u0641\u0632\u0648\u0646\u0647 \u0631\u0627 \u0631\u0648\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Chromium \u0645\u0627\u0646\u0646\u062f Google Chrome\u060c Microsoft Edge \u06cc\u0627 Opera \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0628\u0647 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u0641\u0632\u0648\u0646\u0647 Chrome \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0639\u0628\u0627\u0631\u062a \u201cVue Devtools\u201d \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f. \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u0633\u062e\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0646\u0635\u0628 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u062a\u0648\u0633\u0637 &#8220;vuejs-dev&#8221; \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u0648 \u0628\u0627 \u0646\u0633\u062e\u0647 Vue 3 \u0634\u0645\u0627 \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627\u0634\u062f (\u0646\u0633\u062e\u0647 \u0628\u062a\u0627 \u0628\u0631\u0627\u06cc Vue 3).<\/p>\n<p>\u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 Firefox \u0646\u06cc\u0632 \u0628\u0647 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u0641\u0632\u0648\u0646\u0647 Firefox \u0628\u0631\u0648\u06cc\u062f \u0648 \u201cVue Devtools\u201d \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u0648 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 Evan You \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 Safari \u06cc\u0627 \u062f\u06cc\u06af\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0634\u062f\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u0633\u062a\u0642\u0644 Electron \u0627\u0632 \u0637\u0631\u06cc\u0642 npm \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f.<\/p>\n<h3>\u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0648 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u062f\u0631 Devtools<\/h3>\n<p>\u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u067e\u0633 \u0627\u0632 \u0628\u0627\u0632\u06a9\u0631\u062f\u0646 <code>localhost:8080<\/code>\u060c \u0627\u0628\u0632\u0627\u0631 Inspect \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f (CMD+ALT+I \u062f\u0631 \u0645\u06a9 \u0648 CTRL+ALT+I \u062f\u0631 \u0648\u06cc\u0646\u062f\u0648\u0632). \u062f\u0631 \u0646\u0648\u0627\u0631 \u0628\u0627\u0644\u0627\u06cc \u067e\u0646\u0644 Inspect\u060c \u062a\u0628 \u201cVue\u201d \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Vue \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a <code>App<\/code> \u0648 \u0633\u067e\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc <code>AirportCard<\/code> \u06a9\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0647\u0633\u062a\u0646\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u0648\u062f\u060c \u062f\u0631 \u067e\u0646\u0644 \u062c\u0632\u0626\u06cc\u0627\u062a\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c props \u0648 computed properties \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0622\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0648\u0636\u0639\u06cc\u062a \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0642\u06cc\u0642 \u0628\u0631\u0631\u0633\u06cc \u0648 \u062d\u062a\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 Browser \u0622\u0646 \u0631\u0627 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<h3>\u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u062f\u0631 Devtools \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u0633\u0631\u06cc\u0639<\/h3>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0627\u062e\u0644 Vue.js Devtools \u0645\u0642\u062f\u0627\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u062a\u0633\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u06cc\u0639 \u0631\u0648\u06cc \u0638\u0627\u0647\u0631 \u06cc\u0627 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u062f\u0648\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u062f \u0627\u0635\u0644\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<p>\u0645\u062b\u0644\u0627\u064b \u0628\u0627 \u06af\u0630\u0627\u0634\u062a\u0646 \u0645\u0642\u062f\u0627\u0631 <code>true<\/code> \u062f\u0631 \u0641\u06cc\u0644\u062f <code>construction<\/code> \u062f\u0631 \u062f\u0627\u062f\u0647 \u06cc\u06a9 \u0641\u0631\u0648\u062f\u06af\u0627\u0647\u060c \u06a9\u0627\u0631\u062a \u0622\u0646 \u0628\u0647 \u0634\u06a9\u0644 \u0642\u0631\u0645\u0632 \u0631\u0646\u06af (\u062d\u0627\u0644\u062a \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a) \u062a\u063a\u06cc\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f.<\/p>\n<h3>\u062f\u06cc\u0628\u0627\u06af \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc Vue<\/h3>\n<p>\u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a <code>AirportCard.vue<\/code>\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @click \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u0634\u0646\u06cc\u062f\u0647 \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 $emit \u0631\u0648\u06cc\u062f\u0627\u062f \u0633\u0641\u0627\u0631\u0634\u06cc <code>favorite-airport<\/code> \u0647\u0645\u0631\u0627\u0647 \u062f\u0627\u062f\u0647 \u0641\u0631\u0648\u062f\u06af\u0627\u0647 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p>\u062f\u0631 Vue.js Devtools\u060c \u0628\u062e\u0634 Timeline (\u0632\u0645\u0627\u0646\u200c\u0628\u0646\u062f\u06cc) \u0627\u0645\u06a9\u0627\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u062c\u0645\u0644\u0647 \u06a9\u0644\u06cc\u06a9\u200c\u0647\u0627 \u0648 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u06a9\u0627\u0631\u062a \u0641\u0631\u0648\u062f\u06af\u0627\u0647\u060c \u0627\u06cc\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0646\u0642\u0627\u0637 \u0631\u0646\u06af\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0648 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0642\u06cc\u0642 \u062f\u0631 \u0645\u0648\u0631\u062f \u0632\u0645\u0627\u0646 \u0648 payload \u0622\u0646 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<h3>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0628\u0627 Vuex \u0648 \u0628\u0631\u0631\u0633\u06cc \u062f\u0631 Devtools<\/h3>\n<p>\u0628\u0647 \u0641\u0627\u06cc\u0644 <code>src\/store\/index.js<\/code> \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre>export default createStore({\r\n  state() {\r\n    return {\r\n      favorites: []\r\n    };\r\n  },\r\n  mutations: {\r\n    UPDATE_FAVORITES(state, airport) {\r\n      state.favorites.push(airport);\r\n    }\r\n  },\r\n  actions: {\r\n    addToFavorites({ commit, state }, airport) {\r\n      if (!state.favorites.find(fav =&gt; fav.abbreviation === airport.abbreviation)) {\r\n        commit(\"UPDATE_FAVORITES\", airport);\r\n      }\r\n    }\r\n  }\r\n});\r\n<\/pre>\n<p>\u062f\u0631 App.vue \u0647\u0646\u06af\u0627\u0645 \u062f\u0631\u06cc\u0627\u0641\u062a \u0631\u0648\u06cc\u062f\u0627\u062f \u0633\u0641\u0627\u0631\u0634\u06cc <code>favorite-airport<\/code> \u0628\u0627 <code>addToFavorites<\/code> \u0627\u06a9\u0634\u0646 Vuex \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0648\u0636\u0639\u06cc\u062a favorites \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 Vue.js Devtools \u0628\u062e\u0634 Vuex \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u0636\u0639\u06cc\u062a (state) \u0641\u0639\u0644\u06cc\u060c \u0627\u06a9\u0634\u0646\u200c\u0647\u0627 \u0648 mutations \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0635\u0631\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 \u0686\u06af\u0648\u0646\u0647 \u0648\u0636\u0639\u06cc\u062a favorites \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u062e\u0634\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0641\u0631\u0648\u062f\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0645\u0646\u062a\u062e\u0628 \u062f\u0631 App.vue\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0644\u06cc\u0633\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0646\u06cc\u0632 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3>\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h3>\n<p>Vue.js Devtools \u0627\u0628\u0632\u0627\u0631\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0631\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc Chromium \u0648 Firefox \u0627\u0633\u062a \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u0633\u062a\u0642\u0644 \u0646\u06cc\u0632 \u0642\u0627\u0628\u0644 \u062f\u0631\u06cc\u0627\u0641\u062a \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0634\u0645\u0627 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u062e\u062a\u06cc\u062f\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u06cc\u062f\u060c \u062a\u0648\u0633\u0637 Devtools \u0628\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u060c \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c \u0645\u0634\u0627\u0647\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0648 \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af \u0648\u0636\u0639\u06cc\u062a Vuex \u067e\u0631\u062f\u0627\u062e\u062a\u06cc\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631\u0628\u0627\u0631\u0647 Vue.js Devtools\u060c \u0628\u0647 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0631\u0633\u0645\u06cc \u0622\u0646 \u0628\u0647 \u0646\u0634\u0627\u0646\u06cc <a href=\"https:\/\/devtools.vuejs.org\/\">https:\/\/devtools.vuejs.org\/<\/a> \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0632 \u0647\u0645\u0631\u0627\u0647\u06cc \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0627 <strong><a href=\"https:\/\/parmin.cloud\/\">\u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/a><\/strong> \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u06cc\u0645.<\/p>\n<\/div>\n<div style='text-align:center' class='yasr-auto-insert-visitor'><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0628\u0631\u0627\u06cc \u062f\u06cc\u0628\u0627\u06af \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Vue\u060c \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627\u06cc\u062f \u0628\u06cc\u0646 \u06a9\u062f \u0645\u0646\u0628\u0639 \u0648 \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u062f \u0648 \u0628\u062f\u0644 \u0634\u0648\u06cc\u062f \u0648 \u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0633\u0631\u0648\u0631 \u0631\u0627 \u0645\u062c\u062f\u062f \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0632\u0645\u0627\u0646\u200c\u0628\u0631 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u062f\u06cc\u0628\u0627\u06af\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0627\u0646\u0646\u062f Vue.js Devtools \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. Vue.js Devtools \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0627\u06cc [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[67,190],"tags":[559,557,558,556,555],"class_list":["post-5653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-67","category-programming","tag-vue-js","tag-vue-js-devtools","tag-558","tag--vue","tag----vuex"],"aioseo_notices":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/5653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=5653"}],"version-history":[{"count":1,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/5653\/revisions"}],"predecessor-version":[{"id":5657,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/5653\/revisions\/5657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/5667"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=5653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=5653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=5653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}