什么是store拆分即多模塊狀態(tài)管理modules-創(chuàng)新互聯(lián)

什么是store拆分即多模塊狀態(tài)管理modules，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括二七網(wǎng)站建設(shè)、二七網(wǎng)站制作、二七網(wǎng)頁制作以及二七網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，二七網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到二七省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

了解vuex的朋友都知道它是vue用來集中管理狀態(tài)的容器，如果了解過Reduce的朋友可能看見他時就會非常熟悉，都是用來管理全局的狀態(tài)的，實(shí)現(xiàn)不同組件之間相互的數(shù)據(jù)訪問。這里我們不介紹vuex,主要介紹vuex拆分store以及多模塊管理。我們知道如果一個項(xiàng)目非常大的話狀態(tài)就會非常的多，如果不進(jìn)行分類處理，所有的狀態(tài)都維護(hù)在一個state里面的話，狀態(tài)管理就會變得非常的混亂，這樣非常不利于項(xiàng)目的后期維護(hù)。我們現(xiàn)在前端推崇模塊化開發(fā)，為的就是提高開發(fā)效率和維護(hù)效率，避免重復(fù)工作。那么vuex是怎么樣解決這個問題的呢？這個時候我們今天要講的主角modules就要閃亮登場了。
其實(shí)這個用起來是非常簡單的，正常情況下，我們在用vuex的時候我們是這樣定義的：

states.js //保存應(yīng)用的狀態(tài)值

export default {
  bookList:["西游記","水滸傳","紅樓夢","三國演義"]
}

mutations.js //在這個文件中定義對狀態(tài)值的操作，增刪改查。

export default {//這里要注意不要在mutations里面進(jìn)行異步操作
  ADD_BOOK(state,book){
    state.bookList.push(book);
    return true;
  },
  DELETE_BOOK(state,id){
  }
}

getters.js //將我們在states中定義的值暴露在store.getters對象中，便于我們在組件中可以通過store.getters對象中，便于我們在組件中可以通過store.getters.bookList訪問數(shù)據(jù)

export default {
  bookList:function(state){
    return state.bookList;
  }
}

actions.js //其實(shí)這里定義的方法只是將mutation.js中定義的方法進(jìn)行了一次封裝,就是去觸發(fā)mutations.js中的方法。如果傳如的參數(shù)需要異步獲取的話，我們可以在這里等待異步返回成功后在觸發(fā)mutations中的方法。在組件中這兩個文件定義的方法都可以直接調(diào)用，mutations中定義的方法是通過store.dispath(′ADDBOOK′,book)調(diào)用的，而actons定義的方法是通過store.dispath(′ADDBOOK′,book)調(diào)用的，而actons定義的方法是通過store.commit(‘ADD_BOOK',book),調(diào)用的。

export default {//在action中可以進(jìn)行異步操作。
  add_book({commit},book){
   commit('ADD_BOOK',book);
  },
  delete_book({commit},book){
   commit('DELETE_BOOK',id);
  }
}

這里有時我們還可能會看見一個文件叫mutations_type.js其實(shí)這個文件定義的是mutations中的方法名,我自己在用的時候反正沒定義這個文件，自己看著辦如果喜歡你就定義上。

上面定義的文件定義好了之后，我們就可以將我們定義的這些對象加入到vuex的Store中去了
store.js

import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
vue.use(vuex);
export default new vuex.Store({
          ststes,
          mutatons,
          getters,
          actions
         });

這樣我們就寫完整了一個store了。我們可以看出這里我們只有一個總模塊，那如果我們要將總模塊拆分成幾個小模塊，那應(yīng)該怎樣定義呢？

import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
vue.use(vuex);
export default new vuex.Store({
                modules:{
                     mod1:{
                        states,
                        mutatons,
                        getters,
                        actions
                        },
                     mod2:{}
                  }
         });

import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
vue.use(vuex);
export default new vuex.Store({
                modules:{
                    mod1:{states,
                       mutatons,
                       getters,
                       actions
                      },
                    mod2:{}
                  }
         });

我自己在做項(xiàng)目的時候我一般將一個子模塊的state，mutations，actions，getter寫在一個文件中如:

mod1.js

 export default {
  state:{},
  mutatons:{},
  actions:{},
  getters:{}
}

mod2.js

 export default {
  state:{},
  mutatons:{},
  actions:{},
  getters:{}
}

然后在將幾個mod合并到store中去：

import vue from 'vue'
import vuex from 'vuex'
import mod1 from './mod1.js'
import mod2 from './mod2.js'
vue.use(vuex);
export default new vuex.Store({
                    modules:{
                          mod1:mod1,
                          mod2:mod1
                  }
         });

我感覺這樣寫的話代碼結(jié)構(gòu)更加直觀，清晰。而且正常的話一個子模塊一般不會有太多的狀態(tài)和方法。當(dāng)然如果項(xiàng)目中子模塊的狀態(tài)和方法確實(shí)太多，我們還是推薦將state,actions,getters,mutations單獨(dú)寫在不同的文件中，然后將不同的子模塊的這些文件放在一個文件夾中，這樣就代表一個子狀態(tài)管理模塊。

通過將總的store拆分過后，我們在狀態(tài)管理和維護(hù)的時候就更加清晰了。

在創(chuàng)建出store后，我們需要將store掛載到vue上去

import vue from 'vue'
import store from './store'
var vue = new Vue({
 store,
 ···· 
}).$mount("#app")

之后在組建中就可以使用和管理前面定義的狀態(tài)了，

<template>
</template>
<script>
  export default{
       computed{
              bookList:this.$store.mod1.bookList,
       },
       methods:{
             addBook:book=>this.$store.mod1.commit('ADD_BOOK',book);//這里需要注意，如果你是用了子模塊的這種方法你需要加上模塊名這是mod1，如果沒有就不需要加。
             deleteBook:id=>this.$store.mod1.disaptch('DELETE_BOOK',id);
    }    
  }
</script>

總結(jié)：

將store進(jìn)行拆分，有利于我們更好的管理項(xiàng)目中的狀態(tài)，以及使我們的項(xiàng)目維護(hù)更加加單高效。各個模塊之間的開發(fā)互相不影響。

好了，這次就簡單的介紹到這里，這次主要是介紹怎么用。并沒有深入到他的實(shí)現(xiàn)原理，對于vue的涉世未深的人來說，我感覺還是夠用了。

看完上述內(nèi)容，你們掌握什么是store拆分即多模塊狀態(tài)管理modules的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章標(biāo)題：什么是store拆分即多模塊狀態(tài)管理modules-創(chuàng)新互聯(lián)
鏈接分享：http://muchs.cn/article48/ceeshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站設(shè)計、移動網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、搜索引擎優(yōu)化、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容