vuex的module模塊用法示例

更新時(shí)間：2018年11月12日 16:04:48 作者：毛線內(nèi)褲

這篇文章主要介紹了vuex的module模塊用法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

想嘗試使用vuex的module來進(jìn)行操作，看了一些資料，我簡(jiǎn)單進(jìn)行了一個(gè)簡(jiǎ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
};

注意上面多出的一行，我們?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'
  ])
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

深入理解Vuex 模塊化(module)

相關(guān)文章

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