Vue.js进阶系列(55)--Vuex的module

今天的内容主要是介绍Vuex中的module,也是Vuex核心概念的最后一个啦。


一、module

1.产生原因

Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
  Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理,当应用变得非常复杂时,store对象就有可能变得相当臃肿.
  为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等。

2.使用方式

  正如上面所提到的,我们可以在module中声明多个模块,然后在每个模块中书写自己模块的state、mutation、action、getters。下面进行逐步的展示。

① module中的state

1-1 module中state的定义
定义的方式和store中定义state的方式一样,具体见下面的代码:

//单独模块的书写
const moduleA = {
  state:{
    name:'我是moduleA的name'
  }
}

//在store对象声明模块A
const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
})

  在store对象的module中声明了moduleA,并且moduleA自己的state中有一个name变量。
1-2 module中state的使用

<template>
  <div id="app">
    <h2>-----Vuex中module的测试</h2>
    <h2>{{$store.state.a.name}}</h2>
  </div>
</template>


  如果要使用moduleA中的name值时,通过state获取而不是module,因为在module定义的a模块最终会被渲染到state中。

② 模块中的mutations

2-1 module中mutations的定义
定义的方式和store中的mutations定义的方式一样,具体见下面的代码:

//单独模块的书写
const moduleA = {
  state:{
    name:'我是moduleA的name'
  },
  mutations:{
    updataName(state,payload){
      state.name = payload
    }
  }
}

//在store对象声明模块A
const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
})

声明了 根据用户传递的参数修改姓名的updataName方法
2-2 module中mutations的使用
使用方式和store对象中的mutations一样,通过commit方法提交,具体代码如下:

<template>
  <div id="app">
    <h2>-----Vuex中module的测试</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改名字</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    updateName(){
      this.$store.commit('updataName','李四')
    }
  }
}
</script>

点击按钮,将修改成“李四”。效果如下:


这里要注意两点:
  第一,命名不重复。模块内的mutations和store对象的mutations命名不要重复,否则浏览器不知道提交谁的mutations
  第二,查找顺序。使用commit方法提交时,首先会查找store对象的mutations,看看是否有该方法,如果没有就是去模块内的mutations查找。

③ 模块中的getters

3-1 模块中getters的定义
  定义的方式和在store中定义的方式类似。不同的是,如果在模块中想要使用store中state内的变量,需要通过rootState参数进行获取,具体代码如下:

//单独模块的书写
const moduleA = {
  state:{
    name:'我是moduleA的name'
  },
  getters:{
    //1.普通应用
    fullname(state){
      return state.name +'1111'
    },
    //2.应用本模块的getters
    fullname2(state,getters){
      return getters.fullname +'2222'
    },
    fullname3(state,getters,rootState){
      return getters.fullname2 + rootState.counter
    }
  }
}

//在store对象声明模块A
const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
})

用法1是简单的getters应用,将name的值后面追加上“1111”;
用法2是获取本模块中的getters,然后对获取到的结果再追加上“2222”;
用法3是获取store中的counter,通过rootState获取,然后再追加到到fullname2的结果中。
3-2 模块中getters的使用
使用方式和store中的类似,具体代码如下:

<template>
  <div id="app">
    <h2>-----Vuex中module的测试-----</h2>
    <h2>{{$store.getters.fullname}}</h2>
    <h2>{{$store.getters.fullname2}}</h2>
    <h2>{{$store.getters.fullname3}}</h2>
  </div>
</template>

其效果如下所示:


④ module的action

4-1 定义的方式

//单独模块的书写
const moduleA = {
  state:{
    name:'我是moduleA的name'
  },
  mutations:{
    updataName(state,payload){
      state.name = payload
    }
  },
  actions:{
    aupdateName(context){
      setTimeout(()=>{
        context.commit('updataName','王五')
      },10)
    }
  }
}

//在store对象声明模块A
const store = new Vuex.Store({
    modules:{
        a:moduleA
    }
})

通过setTimeout来模拟异步操作,修改name的值为“王五”
4-2 使用方式

<template>
  <div id="app">
    <h2>-----Vuex中module的测试</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="asycnUpdateName">异步修改名字</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    asycnUpdateName(){
      this.$store.dispatch('aupdateName')
    }
  }
}
</script>


  这里需要注意的是,在模块中,context.commit()仅仅提交自己模块的方法而不包括store中的方法。
  以上就是今天Vuex中module的介绍,主要详细的介绍了在模块内如如何定义和使用state、mutations、getters、action。
❤记得给小编点赞ho❤

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341