由於使用單一狀態樹，應用的所有狀態會集中到乙個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。
為了解決以上問題，vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組
src
├── store
│ ├── modules
│ │ ├── user.js
│ │ └── login.js
│ ├── getters.js
│ └── index.js
└── main.js
main.js 使用store import store from "./store";
/*
*/import vue from "vue";
import store from "./store";
import router from "./router";
vue.config.productiontip = false;
new vue();
index.js
/*
*/import vue from "vue";
import vuex from "vuex";
import getters from "./getters";
import user from './modules/user';
import login from './modules/login';
vue.use(vuex);
const store = new vuex.store(,
getters,
});export default store;
getters.js
/*
*/const getters = ;
export default getters;
user.js (示例中使用的介面請根據專案實際情況使用)
/*
*/import from "@i/user";
const state = ,
};const mutations = ,
};const actions =
*/getuserinfo() = res;
if (status === "1") else
});});
},};export default ;
login.js (示例中使用的介面請根據專案實際情況使用)
/*
*/import from "@i/user";
import from "@u/auth";
const state = ;
const mutations = ,
};const actions =
*/getlogin(, data) = data;
return new promise((resolve, reject) => )
.then((res) => = res;
if (status === "1") else
}).catch((res) => );
});},
};export default ;
頁面使用示例
}
11 模組化使用PHP
許多站點不使用任何精美的內容管理系統 cms 來生成其頁面，它們只是靜態html內容的良好表現。您祖母餡餅烘焙業務的站點可能只有幾頁，也許是主頁，關於頁面和聯絡頁面。這些頁面中的每個頁面都有不同的主要內容，但是其中許多頁面都保持完全相同，例如頁首，導航和頁尾。將這些部分視為 模組 您可以輕鬆地使用p...
vuex的模組化使用
store檔案如下 1.modules下檔案是模組化的劃分，裡面的js有state,action,mutations.然後通過 export default 方式匯出。2.index.js中匯出的格式如下 new vuex.store mutations actions getters 所以inde...
什麼是模組化？模組化的好處
1.高內聚低耦合，有利於團隊作戰，當專案很複雜的時候，將專案劃分為子模組分給不同的人開發，最後再組合在一起，這樣可以降低模組與模組之間的依賴關係體現低耦合，模組又有特定功能體現高內聚。2.可重用，方便維護，模組的特點就是有特定功能，當兩個專案都需要某種功能的時候，我們定義乙個特定的模組來實現該功能，...