Vuex介绍

一、定义

概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信

官网地址: https://vuex.vuejs.org/zh/

二、使用时机

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

三、搭建vuex环境

四、基本使用

五、getter的使用

(1) 概念: 当state中的数据需要经过加工后再使用时,可以使用getters加工[类似于dada->computed state->getters]

(2) 在store中追加getters配置

javascript 复制代码

const getters= {
  xxx(state){
    return state.sum * 10;
  }
}

(3) 组件中读取数据: $store.getters.xxx

六、四个map方法的使用

(1) mapState: 用于帮助我们映射state中的数据为计算属性

javascript 复制代码

computed: {
  // 借助mapState生成计算属性-对象写法
  ...mapState({sum:'sum', school: 'school', subject: 'subject'})
  // 借助mapState生成计算属性=数组写法
  ...mapState(['sum', 'school', 'subject'])
}

(2) mapGetters: 用于帮助我们映射getters中的数据为计算属性

javascript 复制代码

computed: {
  // 借助mapGetters生成计算属性-对象写法
  ...mapGetters({bigSum:"bigSum"})
  // 借助mapGetters生成计算属性-数组写法
  ...mapGetters(['bigSum'])
}

(3) mapActions: 用于帮助我们生成与actions对话的方法,即包含$store.dispatch(xxx)的函数

javascript 复制代码

methods: {
  // 借助mapActions生成-对象形式
  ...mapActions({increment: 'jiaOdd', incrementWait: 'jiaWait'})
  // 借助mapActions生成-数组形式
  ...mapActions(['jiaOdd', 'jiaWait'])
}

(4) mapMutations: 用于帮助我们生成与mutation对话的方法.即包含$store.commit(xxx)的函数

javascript 复制代码

methods: {
  // 借助mapMutations生成-对象形式
  ...mapMutations({increment: 'JIA', decrement: 'JIAN'})
  // 借助mapMutations生成-数组形式
  ...mapMutations(['JIA', 'JIAN'])
}

备注: mapActions与mapMutations使用时,若需要传递参数需要,则在模板中绑定事件时传递参数,否则参数是事件对象

一、定义

二、使用时机

三、搭建vuex环境

四、基本使用

五、getter的使用

六、四个map方法的使用

七、模块化+命名空间