526互联

5.VueX

发布时间 2023-04-26 23:00:57作者: 22-10-21

5.VueX

5.1.简介

5.1.1.介绍

概念以及作用：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对 vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

使用场景：

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

5.1.2.纯vue版的计数器

效果图

image-20230425192752120

代码示例

image-20230425192823582

5.1.3.Vuex工作原理

①原理图

vuex

②state

vuex管理的状态对象

它应该是唯一的

//代码示例
const state = {
    xxx:initValue
}

③Actions

值为一个对象，包含多个响应用户动作的回调函数

通过commit( )来触发mutation中函数的调用, 间接更新state

如何触发actions中的回调： 在组件中使用$store.dispatch('对应的action回调方法名',数据)

可以包含异步代码（定时器，ajax等）

//代码示例
const actions = {
    zzz({commit,state},data1){
        commit('yyy',{data1})
    }
}

④Mutations

值是一个对象，包含多个直接更新 state 的方法

在组件中使用$store.commit('对应的mutations回调方法名',数据)

在action中使用：action能调用mutations中的方法：commit(对应的mutations方法名)

mutations中方法的特点：不能写异步代码、只能单纯的操作state

//代码示例
const mutations = {
    yyy(state,{data1}){
        //更新state的某个属性
    }
}

⑤getters

类似于一个全局的计算属性

值为一个对象，包含多个用于返回数据的函数

使用：$store.getters.mmm

//代码示例
const getters = {
    mmm(state){
        return state.msg + '!'
    }
}

⑥modules

包含多个module，一个module是一个store的配置对象，与一个组件（包含有共享数据）对应

5.2.入门

5.2.1.搭建环境

安装vuex3：`npm i vuex@3，匹配vue2

安装vuex4：`npm i vuex，匹配vue3

导入vuex：import vuex from 'vuex'

使用vuex：Vue.use(vuex)

代码示例

index.js

image-20230425213152368

main.js

image-20230426225145266

5.2.2.vuex版的计数器

效果图

image-20230426002019073

代码示例

count

image-20230426002040859

main.js

image-20230426002053486

执行流程

image-20230426002325282

mutations的方法名字最好大写，以便于区分

commit对接的是mutations

dispatch对接的是actions

5.3.四个map方法

四个方法中的对象写法和数组写法的简写和使用方式都是差不多的

5.3.1.mapState

作用：用于映射state中的数据为计算属性

使用

  1. 对象写法：...mapState({对象名1:'调用的对象名1',对象名2:'调用的对象名2'})
    • 这种写法没有简写方式
  2. 数组写法：...mapState([对象名1:'调用的对象名1',对象名2:'调用的对象名2'])
    • 如果对象名和调用的对象名是一致的，可以简写：...mapXXX(['对象名1',对象名2'])

代码示例

image-20230426172234748

黄色框的写法是将上面红色框中相同的部分（this.$store.state）提取出来，这个写法需要导入vuex提供的函数mapState

5.3.2.mapGetters

与上面mapState函数使用一致，只是名字不同

作用：用于映射getters中的数据为计算属性

使用

  1. 对象写法：...mapGetters({对象名1:'调用的对象名1',对象名2:'调用的对象名2'})
    • 这种写法没有简写方式
  2. 数组写法：...mapGetters([对象名1:'调用的对象名1',对象名2:'调用的对象名2'])
    • 如果对象名和调用的对象名是一致的，可以简写：...mapXXX(['对象名1',对象名2'])

代码示例

image-20230426172843042

将相同的代码（this.$store.getters）提取出来，这个写法需要导入vuex提供的函数mapGetters

5.3.3.mapMutations

与上面mapState、mapGetters函数使用一致，只是名字不同

作用：用于帮助我们生成与mutations对话的方法

使用

  1. 对象写法：...mapMutations({方法名1:'调用的方法名1',对象名2:'调用的方法名2'})
    • 这种写法没有简写方式
  2. 数组写法：...mapMutations([方法名1:'调用的方法名1',对象名2:'调用的方法名2'])
    • 如果对象名和调用的对象名是一致的，可以简写：...mapXXX(['方法名1',方法名2'])

代码示例

image-20230426180633151

将相同的代码（this.$store.commmit）提取出来，这个写法需要导入vuex提供的函数mapMutations

5.3.4.mapActions

与上面mapState、mapGetters、mapMutations函数使用一致，只是名字不同

作用：用于帮助我们生成与actions对话的方法

使用

  1. 对象写法：...mapActions({方法名1:'调用的方法名1',对象名2:'调用的方法名2'})
    • 这种写法没有简写方式
  2. 数组写法：...mapActions([方法名1:'调用的方法名1',对象名2:'调用的方法名2'])
    • 如果对象名和调用的对象名是一致的，可以简写：...mapXXX(['方法名1',方法名2'])

代码示例

image-20230426180700551

将相同的代码（this.$store.dispatch）提取出来，这个写法需要导入vuex提供的函数mapActions

注意：使用mapActions和mapMutations方法使用时，若需要传递参数需要: 在模板中定事件时传递好参数，否则参数是事件对象

5.3.5.加强版的计数器

效果图

image-20230426180851454

代码示例

index.js

image-20230426180211467

Count

image-20230426180827631

5.4.模块化+命名空间

将每一个功能的mutation、actions、state、getters方法进行模块化管理

使用

  1. 在index.js文件中进行分类

    const xxx = {
    //命名空间
    namespaced:true,
    mutation{},
	actions{},
    state{}
}

// 创建并且暴露store
export default new Vuex.Store({
    // 配置模块对象
    modules:{
        // 这里只需要配置对象名
        xxx
    }
})

  2. 在组件中使用

    1. ...mapXXX方式

      //在原本的方式前面添加一个模块名参数即可
...mapXXX('模块化名字',['方法名1','方法名2'])

    2. 普通写法

      //这种写法的获取方式有点奇怪
方法名(){
    return this.$store.getters['模块化名字/方法名'];
}

代码示例

index.js

image-20230426205746663

count

image-20230426211415725