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