在VUEX中如果沒有其它操作，在這中只是單一狀態數，在項目中我們只有一個state
如果我們的業務量越來越大，所以胡數據都堆在一起，以后更改起來就會很麻煩
這時我們就需要使用模塊的概念
modules:{ user:{ //跟用戶相關的數據放這 state:{ }, geeters:{ }, mutations:{ }, actions:{ }, }, article:{ //跟文章相關的保存在這里 state:{ }, geeters:{ }, mutations:{ }, actions:{ }, } }
下面來這個簡寫
modules: {
user,
article,
cart,
goods,
}
這modules只需要 給個名字
然后我們在最外層寫入里面的state，geeters。。。等
const user ={ state:()=>( { name:'lmonkey', //用戶存的名字 slogen:'abc'//存的數據 }), getters: { }, mutations: { }, actions: { }, } const artcle={}; const cart ={}; const goods={};
如圖
如何在頁面中使用模塊的數據
如圖
在頁面的效果
為什么使用user模塊，不是user.state而是state.user
因為我們這個user模塊是相當綁定到了state里
模塊化的mutations使用
我們要修改這個imonkey的名字
可以這么寫
然后在頁面中傳值
這里的名字不用通過模塊化去找，但不可以和全局的名字重復不然會優先使用全局的
原圖：
效果圖
模塊化的getters（計算屬性）使用
在頁面引用中同樣上一mutations使用一樣
效果圖
模塊actions異步請求
在actions下申明一個方法
這里我用定時器來模擬異步請求，然后執行mutations的方法進行更改傳值
如圖
頁面代碼
使用dispatch觸發方法
效果圖
文件拆分
在vuex.js中我們看整體布局感覺很亂，我們還可以通過拆分來進一步整理
首先是全局
把一個一個剪切getters,mutations,actions里的內容然后放到對應的js文件里，再導入到這個js文件
把全局的state放到最外層聲明
如圖
然后一起導入到對應的index.js文件里
然后是模塊化的modules,在全局里不變一樣引用名字，但js內容也要單獨放到一個js和全局引用一個
然后在引入到index.js
如果想優化模塊化的布局也可以像這樣一個一個文件單件生成引入到相應的模塊化js里
這里就不再舉例
再看一下index.js的整體
優化完成