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)文章
vue3學(xué)習(xí)指導(dǎo)教程(附帶獲取屏幕可視區(qū)域?qū)捀?
Vue3是Vue的第三個版本更快,更輕,易維護,更多的原生支持,下面這篇文章主要給大家介紹了關(guān)于vue3學(xué)習(xí)指導(dǎo)教程(附帶獲取屏幕可視區(qū)域?qū)捀?的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue中element-ui不能修改el-input框,或是不能修改某些值問題
這篇文章主要介紹了vue中element-ui不能修改el-input框,或是不能修改某些值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決
這篇文章主要介紹了vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue通過v-for實現(xiàn)年份自動遞增，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
vee-validate vue 2.0自定義表單驗證的實例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能
這篇文章主要介紹了Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
element-ui中的select下拉列表設(shè)置默認(rèn)值方法
今天小編就為大家分享一篇element-ui中的select下拉列表設(shè)置默認(rèn)值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue + element動態(tài)多表頭與動態(tài)插槽
這篇文章主要介紹了vue + element動態(tài)多表頭與動態(tài)插槽，下面文章圍繞vue + element動態(tài)多表頭與動態(tài)插槽的相關(guān)資料展開文章的內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下，希望對大家有所幫助2021-12-12
從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化)
這篇文章主要介紹了從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
當(dāng)用戶在當(dāng)前站點停留時間比較長，中途站點進(jìn)行升級更新之后，用戶如果不刷新頁面就任然停留在舊的頁面里，如何讓用戶收到一個提示，引導(dǎo)用戶進(jìn)行更新操作呢？下面給大家介紹如何站點更新如何在生產(chǎn)環(huán)境提示用戶更新，進(jìn)行頁面刷新操作，核心原理其實很簡單2023-03-03