vuex模塊獲取數(shù)據(jù)及方法的簡單示例
前言：為了減輕store的負(fù)擔(dān)，產(chǎn)生模塊（module），每個模塊獨(dú)立，可復(fù)用
一、模塊必寫
示例：namespaced:true
必寫原因 為，當(dāng)多模塊整合時，actions和mutations會整合為數(shù)組，但是getters不會，它是唯一的，不會整合，所以為了getters正常使用的同時每個模塊具有獨(dú)立性和可復(fù)用，namespaced:true必須寫
二、獲取數(shù)據(jù)
1.正常獲取模塊數(shù)據(jù)
代碼如下（示例）：
this.$store.state.模塊.num //數(shù)據(jù)
this.$store.dispatch('模塊/方法') //方法
this.$store.getters['模塊/sum']這個方法可以獲取到數(shù)據(jù)，但是看起來是不是比較麻煩，尤其是當(dāng)這個數(shù)據(jù)沒太多的邏輯處理，直接插入視圖，代碼看起來太多了，接下來給大家分享其他方法
2.輔助函數(shù)獲取模塊數(shù)據(jù)
vuex中提供了四種輔助函數(shù)，mapState,mapActions,mapMutations,mapGetters,寫的時候直接從vuex中提溜出來
示例：
import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'使用方法：
計算屬性：
...mapState('模塊'，{n:"num"}) //第一種對象寫法
...mapState('模塊',["num"]) //第二種數(shù)組寫法方法中：
...mapMutations("模塊"，["方法"])2.createnamespacedhelpers獲取模塊數(shù)據(jù)（官網(wǎng)提供）
它也是vuex中的一部分，它是一個對象，對象包含四個輔助函數(shù)，如圖所示：
當(dāng)我們知道它是什么之后，接下來就是使用
引入
import {createNamespacedHelpers} from "vuex"打印之后我們也知道createNamespacedHelpers它是一個對象，呢我們就可以通過解構(gòu)賦值拿到那四個輔助函數(shù) ，示例：
let {mapstate,mapGetters,mapMutations} = createNamespacedHelpers("模塊")這時使用就跟上面的輔助函數(shù)的方法大差不差
計算屬性：
...mapState(["num"])
總結(jié)
到此這篇關(guān)于vuex模塊獲取數(shù)據(jù)及方法的文章就介紹到這了,更多相關(guān)vuex模塊獲取數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue跨域解決方法 ,需要的朋友可以參考下2017-10-10
本篇文章主要介紹了vue父子組件的嵌套的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))
這篇文章主要介紹了詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了在IDEA中安裝vue插件全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
本篇文章主要介紹了Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
淺談vue項目重構(gòu)技術(shù)要點和總結(jié)
這篇文章主要介紹了淺談vue項目重構(gòu)技術(shù)要點和總結(jié),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue項目中使用token的身份驗證的簡單實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了uniapp和vue的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue中使用elementUI自定義校驗及點擊提交不生效問題解決辦法
我們在項目中經(jīng)常會用到ElementUI的表單驗證,下面這篇文章主要給大家介紹了關(guān)于vue中使用elementUI自定義校驗及點擊提交不生效問題解決的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12