透過namespacing 讓Vuex 更結構化– JIGSAWYE | vuex rootgetters
去年底退伍之後進入新公司開始工作,近一年來都在Vue/Vuex/Vue-Router之間打滾,也寫出一些心得了,就在睽違一年多之後可以來寫新的東西了XD。大部分人透過Vue開發SPA(SinglePageApplication)時通常都會搭配Vuex一起使用,如果不知道Vuex的作用的話那可以先去參考一下官方介紹[1]。以下範例均來自於官方文件[2]並依據本文加以修改、調整與翻譯State[3]基礎介紹因為官方的文件中都有講解跟範例了,所以mutation跟action及getters的作用就不多提了,以下就大概提一下state的部分。在Vuex中都會有個State,裡面包含了儲存在Vuex中的所...
去年底退伍之後進入新公司開始工作,近一年來都在 Vue / Vuex / Vue-Router 之間打滾,也寫出一些心得了,就在睽違一年多之後可以來寫新的東西了 XD。
大部分人透過 Vue 開發 SPA(Single Page Application)時通常都會搭配 Vuex 一起使用,如果不知道 Vuex 的作用的話那可以先去參考一下官方介紹[1]。
以下範例均來自於官方文件[2]並依據本文加以修改、調整與翻譯
State[3]基礎介紹因為官方的文件中都有講解跟範例了,所以 mutation 跟 action 及 getters 的作用就不多提了,以下就大概提一下 state 的部分。
在 Vuex 中都會有個 State,裡面包含了儲存在 Vuex 中的所有資料,大致長得像這樣:
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
});
實際情況不過在一般專案開發不可能只有一兩個變數而已,所以會切分成好幾個 module,大致如下:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },