vuex的module模塊用法示例
更新時間：2018年11月12日 16:04:48 作者：毛線內(nèi)褲
這篇文章主要介紹了vuex的module模塊用法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
想嘗試使用vuex的module來進(jìn)行操作，看了一些資料，我簡單進(jìn)行了一個簡化
目錄結(jié)構(gòu)：
store
│ index.js
│
├─feeds
│ actions.js
│ getters.js
│ index.js
│ mutation-type.js
│ mutations.js
│ state.js
│
└─movies
actions.js
getters.js
index.js
mutation-type.js
mutations.js
state.js
這里是兩個模塊feeds和movies
第一步：在store文件夾下的index.js入口文件寫入：
import Vue from 'vue';
import Vuex from 'vuex';
import feeds from './feeds';
import movies from './movies';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
feeds,
movies
},
});
第二步：在每個模塊內(nèi)的index文件這組裝所有的零件，并且輸出：
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
export default {
namespaced: true, //多出的一行
state,
mutations,
actions,
getters
};
注意上面多出的一行，我們在組件里怎么區(qū)分不同模塊呢？namespaced寫成true，意思就是可以用這個module名作為區(qū)分了（也就是module所在的文件夾名）
第三步：在組件里使用：
使用的時候
獲取state，這里使用映射：
import { mapState, mapMutations } from "vuex";
export default {
computed:{
...mapStated('模塊名（嵌套層級要寫清楚）',{ //比如'movies/hotMovies
a:state=>state.a,
b:state=>state.b
})
},
觸發(fā)actions操作：
import { mapActions } from 'vuex'
methods:{
...mapActions('模塊名（嵌套層級要寫清楚）',[ //比如'movies/getHotMovies
'foo',
'bar'
])
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)
這篇文章主要介紹了vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)，非常具有實用價值，需要的朋友可以參考下2017-09-09
詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點
本篇文章主要介紹了詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)拖拽式分割布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
詳解如何使用router-link對象方式傳遞參數(shù)？
這篇文章主要介紹了如何使用router-link對象方式傳遞參數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)選項卡小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了關(guān)于vue2響應(yīng)式缺陷的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了el-form的model、prop屬性和表單校驗等使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了記錄一個van-list不斷onLoad加載的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04