{{ count }}
\n \n\n\n...\n\n// JavaScript can also directly assign values\nmounted() {\n this.count = 5;\n}\n```\n\n- Component external: used as before\n```\n\n{{ myCount }}
\n\n\n\n```\n\nAt this point, the internal component's p and input, and the external component's p will synchronously display the same data. And when both internal and external components click on the p tag, both components can see data increment\n\n* extends & mixins: When a component is used for extends or mixins, you only want to modify the default value of props, which can be assigned in the `beforeMount` lifecycle\n```\n// child.vue\nimport parent from './hello-ee-vuex.vue'\n\nexport default {\n extends: parent,\n beforeMount() {\n // If there is no external value assigned to props\n // set the default value to 1\n if (this.$props.count === undefined)\n this.count = 1;\n }\n}\n```\n\n#### 2.4 set\nSet can record the assignment operations of all store states in the log\n```\nimport { createStore } from 'ee-vuex'\n\nexport default createStore({\n count: 0,\n name: 'Hello World',\n}, {\n set(key, value, store) {\n // count -> 0\n // name -> Hello World\n console.log(key, \" -> \", value);\n }\n})\n```\n\n### 3. Type Inference\nWhen creating a store, it is recommended to use a .ts file. Only a few simple lines of code are added, and there will be code prompts when calling the repository in the component\n```\n// Change the file suffix to .tsοΌstores/counter.ts\nimport { createStore } from 'ee-vuex'\n\nconst store = createStore({ count: 1, }, \"$ee\")\n\n// Adding these few lines of code will provide code prompts\ndeclare module '@vue/runtime-core' {\n interface ComponentCustomProperties {\n // Pay attention to the consistency\n // between variable names and store names\n $ee: typeof store,\n }\n}\n\nexport default store;\n```\n\nThe instance returned by creating a repository in JavaScript also has code prompts, and the field type depends on the default or JSdoc defined type\n```\nimport { createStore } from 'ee-vuex'\n\nconst store = createStore({\n // num is of type number\n num: 1,\n // str is of type string\n str: '',\n // arr is of type any[]\n arr: () => [],\n\n // arr2 is of type {a:number, b:string}[]\n /** @type { function():{a:number, b:string}[] } */\n arr2: () => [],\n\n // obj is of type number\n obj: {\n default: 5\n }\n})\n```\n\n### Async State\n\nThe [default value](#1-default-value), [get](#3-get-function), and [set](#4-set-function) of the store state can all generate results asynchronously. Before asynchronous completion, the state will maintain its previous value\n\nThe asynchronous result of obtaining the state is very useful for displaying loading animations, such as obtaining a list of all languages from the backend\n\n```\nconst store = createStore({\n languages: () => new Promise(resolve => {\n setTimeout(() => {\n // Here, we use latency to simulate API latency\n resolve(['zh', 'en', 'jp'])\n }, 1000)\n })\n}, 'store')\n```\n\nTemplate displays language list, but shows loading animation before loading is complete\n```\n\n