vuex的module模塊用法示例

來源：懂視網責編：小采時間：2020-11-27 22:04:01

vuex的module模塊用法示例

vuex的module模塊用法示例:想嘗試使用vuex的module來進行操作，看了一些資料，我簡單進行了一個簡化目錄結構： store │ index.js │ ├─feeds │ actions.js │ getters.js │ index.js │ mutation-type.js │ mutations.js │ state.js │ └

推薦度：

點擊下載本文 文檔為doc格式

導讀vuex的module模塊用法示例:想嘗試使用vuex的module來進行操作，看了一些資料，我簡單進行了一個簡化目錄結構： store │ index.js │ ├─feeds │ actions.js │ getters.js │ index.js │ mutation-type.js │ mutations.js │ state.js │ └

想嘗試使用vuex的module來進行操作，看了一些資料，我簡單進行了一個簡化

目錄結構：

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
 },
});

第二步：在每個模塊內的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
};

注意上面多出的一行，我們在組件里怎么區分不同模塊呢？namespaced寫成true，意思就是可以用這個module名作為區分了（也就是module所在的文件夾名）

第三步：在組件里使用：

使用的時候

獲取state，這里使用映射：

import { mapState, mapMutations } from "vuex";

export default {
computed:{
 ...mapStated('模塊名（嵌套層級要寫清楚）',{ //比如'movies/hotMovies
 a:state=>state.a,
 b:state=>state.b
 })
},

觸發actions操作：

import { mapActions } from 'vuex'
methods:{
 ...mapActions('模塊名（嵌套層級要寫清楚）',[ //比如'movies/getHotMovies
 'foo',
 'bar'
 ])
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vuex的module模塊用法示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用使用方法例子

熱門焦點

vuex的module模塊用法示例

vuex的module模塊用法示例

vuex的module模塊用法示例

最新推薦

猜你喜歡

熱門推薦