Vuex进阶篇——Module模块化学习(前端必会)

  1. 云栖社区>
  2. 博客>
  3. 正文

Vuex进阶篇——Module模块化学习(前端必会)

avillin 2019-12-11 15:16:18 浏览3605
展开阅读全文

我之前发布了一篇vuex的基础,如果你巧妙的将它遗忘,这是个传送门,点击复习。

我也是一直在看vuex,里边需要了解的知识其实不少,但是因为项目并不常用,所以也总是忘记,今天整理下来,和大家谈谈vueX的模块化开发。这个重要不? 这么说:大厂必会,项目必备!若是不会,学!(●'◡'●)

写前吐槽:我参考了很多人写的博客,并不是很清晰,甚至有人直接把vue官网复制到了博客,浏览了一下,居然一个字都不差。所以博主很是无语,今天就说一下vuex的模块化。写这篇文章,博主的头发又掉了一根,先哭一会。。。

问题:什么是vuex module,为什么要使用vuex模块化?

答: 模块化,就是将vuex分为不同的模块,无论从项目上还是结构上,都容易维护,我们再平时写的vuex中,都是在一个文件中,写state,getters,mutations,actions。想象一下,如果我们的项目特别大,比如淘宝那么大,那么我们vuex中要维护的内容会特别多的时候,例如“购物车”需要用到vuex,“设置”需要用到vuex,“首页”也需要用到vuex。那么如果我们都写到一个文件中,就会出现代码相当的“臃肿”。这一个store文件最后好几万行代码,还怎么维护?

所以,我们vue官网就给出了办法,使用vuex模块化开发。

今天我们简单学习使用,学会后,你要查阅官网,深入学习,才能提高这个技术。

模块化有很多写法,今天按照我的习惯,简单的写一下,我们和以前一样,需要下载vuex,会得到一个store文件夹,内部我们有一个index根文件。并且,我们需要自己创建一个module文件夹,里边放入我们想要区分的js模块文件,你想分成多少个模块,就分成多少个,我目前写了两个模块,一个是购物车car.js,一个是我的my.js,type.js先不用管。如图:

image

首先我们需要先将module中的所有文件引入到index.js根文件中,(以前我们是导出mutations等方法,现在这个文件中,我只引入了模块,所以只需要导出模块),如图:

image

然后我们就可以在每个模块当中,写入独立的state,mutations等等。。。这样我们在使用的时候,购物车就用car.js;我的就用my.js。用购物车car.js举例(其他文件同理),如图:

image

这里就可以像以前一样写我们的vuex方法了。细心的同学会注意到,我们导出时,会多出一个namespaced: true,一般我们在模块使用时,都会加入这个属性。

命名空间:namespaced: true:当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名,也就是说,我们在调用这些方法时,需要加上这个文件的路径(比如我要访问这个文件中的state里边的某个属性:this.$store.state.car。后边这个car就是多了个car.js模块名,因为如果不加模块名,那我们会访问所有模块中的属性,那就乱了),所以我们要加上命名空间,相当于独立的区块去使用,模块和模块之间互不干扰。

和平时一样,我们跟个案例:

点击增加数值:
-----------------car.js中

// car.js

const state = {
  number: 100
}
const getters = {

}
const mutations = {
  add () {
    state.number++
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations
}

我们重点说一下vue中怎么获取模块中的内容。我们可以和平常一样,直接用this.$store.state.car.number来获取到state中的number内容。我们今天说说在项目中最常使用的:辅助函数mapStatemapGettersmapActions mapMutations

不一一举例,简单说两个mapStatemapActions ,深入理解可去看官网

我们在使用时,需要先引入:

import { mapState,mapActions } from 'vuex'

这两个函数,前者写在计算属性computed中,后写是方法,写在 methods中;

在写入时,需要用到展开符...,它可以将内容一 一的展开

举例:var a = [1,2,3] var b = [4,5,6] var c = [...a,...b] // 打印c为:[1,2,3,4,5,6]

那我们获取一下state中的number:

computed: {
    ...mapState({
      a: state => state.car.number
    })
  },

 methods: {
    ...mapMutations(['car/add']),
    add () {
      this['car/add']() // 注意,这里this后没有点
    }
  }

展开mapState,定义一个a,然后返回state中的car模块下的number常量。
展开mapMutations,返回是个数组,数组中是个字符串,返回car模块下的add方法,定义一个add,直接触发就可以。有人会问,触发mutations中的方法不是应该用commit吗,答案是我们用了mapMutations,它会将这个路径直接映射成commit方法,所以我们直接用就行,这也是与原来的区别。
我们定义的这个a,就是想要的数值,可以在标签中展示出来,add也直接使用:

<template>
  <div class="home">

    <div>{{a}}</div>
    <div @click="add">点击增加</div>

  </div>
</template>

这样写出来,是好用的,但是看起来会有问题。想一下,car是个模块,我们现在只是举例而已,但是如果,我们在开发中,这个模块下命名空间比较深入,还有其他模块,一层一层比较多,就会变成这个样子:

computed: {
    ...mapState({

      a: state => state.car.xx.xx.xx.number
      // 如果下边还有很多,就要写很多重复的 car.xx.xx.xx,如:
      b: state => state.car.xx.xx.xx.name
      c: state => state.car.xx.xx.xx.key
    })
  },

 methods: {
    ...mapMutations(['car/xx/xx/xx/add']),
    add () {
      this['car/xx/xx/xx/add']()
    }
  }

这个层层的嵌套,那就要写很多重复的car/xx/xx/xx/,所以我们可以,将这个模块当作字符串提取出来,换个写法,按照我们的举例:

computed: {
    // 第一个参数,我们放模块,将它提取出来,统一写在这里。这样下边就不用重复的去写了。
    ...mapState('car', {
      a: state => state.number
    })
  },
  methods: {
    ...mapMutations('car', ['add'])
  }

如上所示,我们可以将他作为参数,放到前面,这样所有绑定都会自动将该模块作为上下文,写出来也简单不少。当然我们还可以再简化一些。我们可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象,对象里有新的绑定在给定命名空间值上的组件绑定辅助函数。

就是我们可以从vuex中引入 createNamespacedHelpers ,然后将刚才的字符串作为参数,传进来,如下:

<template>
  <div class="home">

    <div>{{a}}</div>
    <div @click="add">点击增加</div>

  </div>
</template>
// 这里引入createNamespacedHelpers 
import { createNamespacedHelpers } from 'vuex'
// 定义mapState, mapMutations ,并将car 传入 createNamespacedHelpers
const { mapState, mapMutations } = createNamespacedHelpers('car')
// import { mapState, mapMutations } from 'vuex'

export default {

  computed: {
    ...mapState({
      a: state => state.number
    })
  },

  methods: {
    // 这里可以直接使用add
    ...mapMutations(['add'])
  }
}

这就是vuex模块化,写法都很多,看我们自己的习惯,当然了,我们在模块中,还可以使用常量替代 Mutation 事件类型。在多人开发时,我们知道 mutations 中放入了方法,如果有很多方法,多人协作时找起来会比较麻烦,那我们可以创建一个放入常量的文件(前文中我们创建的 type.js 文件),在里边我们可以定义常量,但注意的是,我们开发中习惯常量要大写,单词之间用下划线分开。并且,在模块中引入这个文:

一、首先,我们创建一个js文件 ,我们前文图片中的 type.js,在里边创建一个常量,开发时前后要一致,并加以标注:

// 前后都要大写,一般前后名称一致,但是为了我们能够理解,本次我们写两个不一致的。

// 开发中,我们应该这样写:export const ADD_NUMBER = 'ADD_NUMBER'

// 本次我们定义前后不一样的

export const ADD_NUMBER = 'AAA' // 点击增加数字

二、在car模块中引入 type.js 并使用引入进来的常量:

import { ADD_NUMBER } from './type' // 按需引入常量

const state = {
  number: 100
}
const getters = {

}
const mutations = {

  // 使用常量命名,注意,这里 [ADD_NUMBER] 映射出来的名称,其实是 AAA
  // 我们写成固定的数字,也可以设置参数,灵活传参
  // 第一个参数是state,第二个参数是传入参数payload
  
  [ADD_NUMBER](state, payload) {
    state.number += payload
  }
}

const actions = {

}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

三、vue页面,由于刚才我们用了payload参数,所以我们也需要传入参数,然后我们可以思考下,我们触发的名称应该写哪一个?

methods: {
  
    // 思考一下问号的地方,应该写 ADD_NUMBER 还是 AAA ?
    ...mapMutations(['???'])
  }

这个问题也就是我刚才故意在常量中,前后不一样的原因,由于我们前后都写一样,有些小白会不知道,这里定义的到底是前边的名称, 还是后边字符串的名称。答案是 AAA,也是ES6中对象的扩展写法

最后的写法是这样的:

<template>
  <div class="home">
    <div>{{a}}</div>
    <!-- mutations 中的payload 参数,可以在这里直接传递 -->
    <div @click="aaa(100)">点击增加</div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations } = createNamespacedHelpers('car')
// import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState({
      a: state => state.number
    })
  },
  methods: {
    // 我们除了可以写成数组,还可以用对象的写法
    ...mapMutations({
      aaa: 'AAA'
    })

    // 你也可以按照原始写法写,当然要去掉div标签中的参数,参数改成在下边传递。
    //aaa () {
    //  this.$store.commit('car/AAA', 100)
    //}

  }
}
</script>

这就是module模块化的开发写法,希望看完,你们会有所收获。有错误的地方请指出,我们及时更正。

网友评论

登录后评论
0/500
评论
avillin
+ 关注