預填充Vue.js全局存儲狀態的三種方法

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"本文最初發佈於austingil.com網站，經原作者授權由InfoQ中文站翻譯並分享。"}]},{"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":"在構建Vue.js應用程序時，當這些應用程序的規模擴張到一定程度後，你就可能會遇到管理全局狀態的需求了。還好，他們的核心開發團隊提供了Vuex這個便利的工具，這是Vue.js應用程序狀態管理庫的事實標準。"}]},{"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的實現。這篇文章並不是一篇入門教程。如果你需要從頭開始瞭解的話，那麼我建議你查閱"},{"type":"link","attrs":{"href":"https:\/\/vuex.vuejs.org\/","title":"","type":null},"content":[{"type":"text","text":"文檔"}]},{"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讓我們可以更方便地管理全局數據存儲。對於下面的示例，假設我們有一個看起來像這樣的存儲："}]},{"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":"這個存儲的初始狀態有一個空的user對象，以及一個可以更新狀態的setUser突變。然後，在我們的應用程序中，我們可能想要顯示user的詳細信息："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"