编程知识 cdmana.com

Pre filling Vue.js Three methods of global storage state

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":" This article was originally published in austingil.com Website , Authorized by the original author InfoQ Translate and share ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In the build Vue.js Application time , As these applications scale to a certain extent , You may encounter the need to manage the global state . not so bad , Their core development team provides Vuex This handy tool , This is a Vue.js The de facto standard for application state management libraries ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" To get started, this library is very simple , So I assume you're familiar with Vuex The implementation of the . This article is not an introductory tutorial . If you need to learn from scratch , Then I suggest you check it out "},{"type":"link","attrs":{"href":"https:\/\/vuex.vuejs.org\/","title":"","type":null},"content":[{"type":"text","text":" file "}]},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vuex Let's manage the global data store more easily . For the following example , Suppose we have a storage that looks like this :"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"import Vue from 'vue'\nimport Vuex from 'vuex'\nVue.use(Vuex)\nconst store = new Vuex.Store({\n state: {\n user: null\n },\n mutations: {\n setUser (state, user) {\n state.user = user\n }\n },\n})\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The initial state of this store has an empty user object , And a state update setUser mutation . then , In our application , We may want to show user Details of :"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"