如何在vuex中使用module模塊-創(chuàng)新互聯(lián)

如何在vuex中使用module模塊？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)是一家專業(yè)提供天橋企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為天橋眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(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

這里是兩個(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
};

注意上面多出的一行，我們在組件里怎么區(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)容，你們掌握如何在vuex中使用module模塊的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：如何在vuex中使用module模塊-創(chuàng)新互聯(lián)
鏈接分享：http://www.jbt999.com/article4/ccgcoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、微信小程序、服務(wù)器托管、App開發(fā)

廣告

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