Vuex 4 正式發佈：打包現在與 Vue 3 一致

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vuex 是一個專門爲 Vue.js 應用程序開發的狀態管理模式。Vuex 採用集中式存儲管理應用的所有組件組件的狀態。換句話說，Vuex 就是幫開發者存儲多個組件共享的數據，方便開發者對其讀取的更改的工具。"}]}]},{"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 4正式版本現已正式發佈。"}]},{"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 4的改進重點是兼容性。Vuex 4支持Vue 3，並提供了與Vuex 3完全相同的API，因此用戶可以在Vue 3中重用現有的Vuex代碼。"}]},{"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":"這個版本還包含一些重大更改，詳情見後文。"}]},{"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":"關於Option和Composition API的基本用法，請參見example目錄。"}]},{"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":"新版還是用NPM包發佈，放在next標籤下，和Vue 3是一樣的。我們計劃在Vue 3拿掉next標籤後一併移除Vuex 4的next標籤。"}]},{"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 4的穩定版做出了許多貢獻，感謝大家的幫助。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"文檔"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要查看文檔，請訪問"},{"type":"link","attrs":{"href":"https:\/\/next.vuex.vuejs.org\/","title":"","type":null},"content":[{"type":"text","text":"Vuex 官網"}]},{"type":"text","text":"。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"重大更改"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"安裝流程已更改"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了與新的Vue 3初始化流程保持一致，Vuex的安裝流程已更改。"}]},{"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":"用戶要創建新的store實例時，推薦使用新引入的createStore函數。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"import { createStore } from 'vuex'\nexport const store = createStore({\n state() {\n return {\n count: 1\n }\n }\n})\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從技術上來講這並不是一個重大更改，不過你還是可以使用newStore(...)語法，我們建議大家用這種方法來和Vue 3、Vue Router 4保持一致。"}]}]},{"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安裝到Vue實例，請傳遞store實例（而不是Vuex）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"import { createApp } from 'vue'\nimport { store } from '.\/store'\nimport App from '.\/App.vue'\nconst app = createApp(App)\napp.use(store)\napp.mount('#app')\n"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"打包現在與Vue 3一致"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新版會生成以下包，以同Vue 3包一致："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vuex.global(.prod).js"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在瀏覽器中直接用於。全局公開Vuex。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"全局構建是作爲IIFE而不是UMD構建的，並且只能與直接共用。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"包含硬編碼的prod\/dev分支，並且prod構建已預先最小化。使用.prod.js文件用於生產。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vuex.esm-browser(.prod).js"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用於原生ES模塊導入（包括通過