VUE2 学习笔记16 插槽、Vuex

插槽

在编写组件时，可能存在这种情况，页面需要显示不同的内容，但是页面结构是类似的，在这种情况下，虽然也可以使用传参来进行，但传参时，还需要编写props等逻辑，略显重复，而且数据的结构还需要是类似的，不能显示十分不同的数据，但可以用插槽解决这个问题。

默认插槽

当父组件使用子组件时，可以在子组件的标签体中编写HTML。当Vue解析到标签体中的内容时，也会对标签体进行解析，但是Vue不知道解析好的DOM放在子组件具体哪个位置，在子组件中，通过<slot>标签可以解决这个问题，表示把解析好的DOM放在<slot>的位置。

插槽中内容的样式，可以写在子组件中，也可以写在父组件中。

在<slot>标签中，还可以设置默认HTML，当调用子组件并且没有编写标签体内容时，就会显示slot标签中的默认值。

具名插槽

如果一个子组件中需要使用多个插槽，每个插槽中需要放置的内容不同，可以指定哪些内容放在哪个插槽：

在父组件调用子组件时，标签体中通过slot属性，slot=“插槽名”，表示该标签放在插槽名对应的插槽中。在子组件中，在slot标签中添加name属性。

如果子组件中有多个未命名的插槽，父组件中也未给插槽命名，则每个子组件的插槽都是一样的，且都是整个标签体。

如果在父组件中，有多个标签都要添加到一个slot中，则不会产生覆盖，这些内容都会添加到对应的slot。可以通过给多个标签添加一样的slot，使这些内容都添加到一个slot。

但也有一种更好的方法，是把需要放在一个插槽中的内容包在template中，在template标签中，想把指定元素放在指定的插槽有两种写法，一个是v-slot:插槽名，一个是slot="插槽名"。

作用域插槽

如果需要放到插槽中的数据，存储在子组件中，这就无法在父组件中直接获得数据，而父组件又需要使用这个数据，当然一种方法是子父组件通信，但是插槽提供了一种父组件能够使用子组件包含的数据的方法。

在子组件的插槽中以属性的形式上传父组件要使用的参数，:变量名="数据"。这样些之后，数据会被传给插槽的使用者，也就是父组件。在父组件中，在标签体内部，标签体的内容必须放在template标签中，且通过scope属性获得数据，语法是scope="变量名"，或者slot-scope="变量名"，而且在父组件中，scope对应的变量名，和子组件传递的变量名可以不一样。当子组件传递多个变量时，多个变量会以一个大对象的方式传递给父组件。

作用域插槽也可以命名，命名方法和具名插槽一样。但是，作用域和命名一起使用时，命名只能用slot形式，用v-slot会引发报错。

Vuex

Vuex是实现集中式管理数据的Vue插件。

和集中式相反的是分布式，分布式是指数据分布在各个地方，而Vuex数据集中管理在仓库中。

Vuex也是一种组件通信的方式，并且可以用于任意组件通信。

和其他的组件间通信相比，如果想要实现组件A、B、C之间数据的读写，通常要给每个组件和想要通信的组件之间各绑定一个$emit和一个$on，当互相通信的组件变多时，会变得有些难以维护。而在Vuex中，Vuex不属于任何一个组件，它是一个数据仓库，当组件想请求或者修改数据的时候，只需要和仓库通信就可以。

当1.多个组件依赖于同一个状态，2.来自不同组件的行为需要变更同一状态时，可以考虑使用Vuex。

工作原理：

Actions（一个Object，用于处理逻辑，并触发Mutations）

Mutations （一个Object，用于修改State中的数据）

State（一个Object，用于存放数据）

VueComponents（Vue组件）

在VC中，使用dispatch(要触发的actions，参数)去调用API，触发Actions对应的函数，在这个函数中，通过commit(要触发的mutations，参数)触发mutations，在mutations对应的函数中，修改State中的数据。当State中的数据修改后，会重新解析调用dispatch的VC，并重新渲染。

为什么要通过Actions触发Mutations，才修改State，而不是直接用VC触发mutations：Actions可以用于处理ajax请求，如果前端在往仓库里存储数据的时候，不知道需要存储的数据，要进行一次前后端交互，就可以通过Actions触发Mutations，如果前端知道数据，不需要发送请求，也可以在VC中通过commit直接触发Mutations。除此之外，Actions中一般用来编写业务逻辑，如果前端交互时，没有很多业务逻辑，也可以不使用Actions。

Store（用于管理Actions、Mutations、State），调用dispatch、commit等方法时，都是通过store，this.$store.dispatch、this.$store.commit。

Store

要为项目引入$store，首先要安装vuex：npm i vuex@3，要注意，如果使用的是Vue2，要安装vuex3版本，在Vue3中，使用vuex4版本。

一般来说，Vuex不会在入口文件中配置，推荐的配置方法是在src目录下创建store文件夹，在store文件夹的index.js中对Vuex进行配置。

在index.js中，对store进行创建：

引入：import Vuex from 'vuex'

使用：Vue.use(Vuex)

思路是在Index.js中写好store，在入口文件处对store进行引入和配置，在这种情况下，要先use(Vuex)，才能获得store方法。但由于import的优先级高于普通的代码，也就是说，当代码运行时，会先对整个文件中的Import语句进行扫描，并把Import语句按顺序都提升到代码最前方，所以对vuex的引入和use需要写在index.js中，不能写在入口文件。

use(Vuex)之后，在Vue实例和VueComponent组件实例上，就有了$store，在创建Vue实例时，就可以传输store配置项了。

然后对actions、mutations、state进行创建。通过new Vuex.Store(配置对象)创建store。配置对象中需要传递actions、mutations、state。

最后将store进行暴露。

将store配置写好后，还要记得将这个配置项写入new Vue的配置对象中，才能生效：

 state

存储数据的对象。

通过this.$store.state.变量名，可以获取仓库中的数据。

actions

在组件中，通过触发dispatch来间接修改仓库中的数据。

dispatch触发actions中对应名字的方法：dispatch(要触发的actions方法名，参数)。

actions中定义对应的函数，它的参数是一个类似store的对象（精简版store，为context），以及dispatch传递的参数。

context身上有store相关的方法，通过它的commit方法触发mutations。

在actions中，context身上也有dispatch方法，可以在一个actions方法中触发另一个actions方法；context身上也具有state，而且在actions中修改state中的数值，也是可以的，state中的数据也会更新，但是这会导致vuex开发者工具不起效果，这种写法不够规范。

mutations

在mutations中，方法名一般大写。在mutations里，尽量不要写业务逻辑，也不要发送ajax请求。

如果在组件中往仓库中写数据时，不涉及业务逻辑，也不需要发送ajax请求，也可以在组件中直接使用this.$store.commit触发mutations方法。

在mutations中，方法的参数为state，以及commit时传递的参数。对state中的数据的修改只能在mutations中进行。

、

getters

getters也是Vuex中提供的一种API，但是，它并不是必须要使用的，当提取仓库中数据的代码过长时，getters可以简化语法。

getters也是一个配置对象，对象中可以定义多个函数，函数的参数为state，函数的返回值为想获取的数据，通过函数名就能获得返回值，可以在每次获取数据时，不需要手写很长的获取代码，在组件中，通过this.$store.getters.函数名即可获得数据。

mapState

通过计算属性简化数据的获取：当需要获得仓库中的数据时，每次都需要写this.$store.state.是十分重复的，可以把这种数据的获取写在computed中、

但与此同时，把数据都写在computed中，也是十分重复的，Vuex提供了mapState方法可以批量生成computed方法，mapState通过import {mapState} from 'vuex'引入。、

mapState需要写在computed中。mapState的返回值是通过配置项生成包含所有配置函数的对象，在computed中，需要获取的是对象内部的函数，而不是对象，所以需要通过...语法把mapState返回的对象中的函数依次取出，放入computed中。

mapState的参数有多种写法：

其中之一是写一个配置对象，对象中的内容以key:value的形式编写，key对应的是computed中定义的函数名，value是computed方法中，return部分的简写，对应于this.$store.state.后面的部分，且是字符串形式。

mapState中，除了写配置对象，还可以写数组：数组中每个元素都是key:value形式，key:value的逻辑规则和对象形式是一样的。如果key和value的名字是一样的，可以省略成字符串形式的一个名字。

mapGetters

和mapState的思想类似，this.$store.getters也有简写形式，而且mapGetters的思路和mapState是一模一样的。

在mapGetters配置项中，value对应的是this.$store.getters.后面的部分。

mapActions

返回this.$store.dispatch的函数也可以批量生成。

对象方法：在mapActions的配置对象中，key是methods方法名，value是想触发的actions的方法名。参数也是通过调用methods方法时传递。

数组写法：同样，如果actions方法名和methods方法名一样，可以用数组的形式写，数组中每个元素都是一个字符串形式的方法名。

mapMutations

返回this.$store.commit的函数也可以批量生成，语法和其他的map方法是一样的。

对象写法：key是methods方法名，value是commit想要触发的方法名。且参数需要在调用methods方法时传递。

数组写法：当commit要触发的方法名，和methods想定义的方法名是一样时，可以在数组中只写一个字符串形式的方法名。

模块化开发

对于项目中的数据，可能有非常非常多，把所有数据和相关操作都写在一个store的index.js下，最后整个index文件里的代码会非常非常多。Vuex支持模块化开发，可以把不同功能的数据存放在不同的仓库中。

只要把不同功能的数据的actions、mutations、state、getters分别分装在不同的对象中，在new Vuex.Store中引入这些对象就可以完成模块化。引入时，配置语法是key是modules，values是一个对象，对象中的key是仓库名，value是仓库的配置，当仓库名和配置名一样时，可以使用简写形式。

如果使用模块化开发，mapState、mapGetters、mapMutations、mapActions的语法会发生一点变化，不能直接对store中的内容进行操作，因为store分了模块。如果想访问某个仓库，比如说home仓库下的数据，在引入内容时，可以使用home获取整个仓库。

也可以通过在调用map方法时多配置一个参数，第一个参数为对应的仓库名，后面的参数为数组或对象形式的语法，和之前的逻辑是一样的，使用这种方法时，要给每个仓库的配置对象设置namespaced:true。

如果不使用map方法，想通过原生的语法调用某个仓库中的方法，使用this.$store.state.仓库名.变量名、this.$store.commit('仓库名/方法名')、this.$store.dispatch('仓库名/方法名')、this.$store.getters[`仓库名/方法名`]来进行指定。

要注意，虽然this.$store.getters的逻辑是一样的，但是getters无法使用字符串的形式获取当前数据，要用[]语法，表示是gtters.仓库名.方法名。