Vuex

理解Vuex

vuex是什么

• 定义

  • 专门在Vue中实现==集中式状态(数据)==管理的一个==Vue插件==

    • 集中式:对立概念分布式,集中式是指老师在讲台上讲课,很多学生但是只讲了一次.

    • 状态:即数据,也可以读做状态数据.

  • 对vue应用中多个组件的共享状态进行集中式的管理(==读/写==),是一种组件见的通信方式

• 适用场景:

  实现任意组件间通信

• 图片讲解

  • 全局事件总线可以实现任意组件之间的通信,==读与写==

    组件A中的x数据需要给其他组件使用

    

    缺点

    组件A中x想给所有的组件使用,那么程序员需要写很多事件.

  • vuex实现多组件共享数据

    

什么时候使用Vuex

• 多个组件依赖同一状态(数据)
• 来自不同组件的==行为==需要改变同一状态

总结:多个组件需要共享数据时

Vue核心概念和API

Vuex工作原理

1. State:对象类型,保管数据

2. Vue Components:Vue组件

3. dispatch:函数,在组件中调用APIdispatch(动作类型,动作对应的数据)

4. Actions:对象类型,其中必定有一个key和dispatch的第一个参数即动作类型相同,这个key的value是一个函数;

   作用,==如果发送ajax请求,就是在这里;Vue允许不走这个,直接到mutatitons.==

5. commit:函数,commmit(动作类型,动作对应的数据)

   • 可以在组件中被调用,无须进行actions操作

   • 可以在actions中被调用

6. Mutations:对象类型,其中必定有一个key和commit传递过来的对象类型相对应,key的value是一个函数;==真正修改和加工State的人==

7. mutate:是上一步Mutations自动执行的,不用程序员调用;之后更改了State中的值

8. Vue Components:State的值发生了变化,Vue Components重新渲染

store

Actions,Mutations,State均需要经过store管理

搭建Vuex开发环境

1. 安装vuex插件

   vue2中,要用vuex的3版本 npm i vuex@3

   vue3中,要用vuex的4版本

2. 创建文件src/store/index.js

   注意：创建store实例对象之前必须先调用Vue.use(Vuex),因此将index.js中重新引入了vue。

   

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
      
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
      
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   })
   

开发技巧

actions对象里的key小写、commitAPI中动作类型大写、mutations对象里的key大写

1. 在main.js中引入index.js

   import store from './store' ，没写文件下的哪个文件就代表引入index.js

Vuex基本使用

1. 初始化数据：配置actions、配置mutations、配置store，操作文件store.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
      
   const actions = {
       //响应组件中加的动作
   	jia(context,value){
   		context.commit('JIA',value)
   	},
   }
      
   const mutations = {
       //执行加
   	JIA(state,value){
   		state.sum += value
   	}
   }
      
   //初始化数据
   const state = {
      sum:0
   }
      
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   })
   

2. 组件中读取vuex中的数据

   this.$store.state.xxx

3. 组件中修改vuex中的数据

   this.$store.dispatch('action中的方法名'，数据)

   this.$store.commit('mutations中的方法名'，数据)

   备注

   若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

getters配置项

1. 概念：当state中的数据需要经过加工后再使用时，可以使用gettters

   • getters是Store中的一个配置项，不是必须有的
   • 类似于vue中的computed，但是计算属性只能用于当前组件，不能跨组件使用。

2. 方法：在store.js中追加getters配置

   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }
      
   //创建并暴露store
   export default new Vuex.Store({
   	......
   	getters
   })
   

   

3. 组件中的模板中如何使用getters中的数据？

   ``，即函数名用来接收return的返回值

注意

不是一定要中getters，也可以直接在插值语法或计算属性中写

但是如果要复用逻辑的话，建议使用getters

四个map方法的使用

使用四个map方法优化代码，帮助程序员开发。

原则：模板中的代码要尽量保持简洁

对象细节

{
    // key可以不带引号，因为底层运行的时候会加，并且一定是字符串
    // value不带引号会被视为一个变量（前提：不是数字），js会将这个变量的值赋给key
    // value带引号被视为一个字符串，将这个字符串的值赋值给key
    key:value    
}

{
	key // 这种简写方式等价为 key:key,和key:'key'不等价；key:'key'无简写方式
}

...obj // 对象展开符，展开后编程key:value,key：value的形式,没有了花括号

mapState

• 需求：简化/优化模板中插值语法的内容，不成写一堆…，因此使用计算属性。

  举例，将写成

• 问题：但是写计算属性一直做重复工作，很麻烦。

• 解决方法：使用mapState方法

• 作用：帮助我们映射state中的数据为计算属性

  • 对象写法

    • 使用场景：当计算属性属性名和state中的属性名不同时，使用对象写法。

    • 注意，属性值必须带双引号。

  • 数组写法

    • 使用场景：当计算属性的属性名和state中的属性名同名时，可以简写使用数组。

    • 注意，不能使用对象的缩写，因为对象的缩写是{key:key}，而不是{key:'key'}

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

mapGetters

• 作用：帮助我们映射getters中的属性为计算属性

• 写法

  • 对象写法

  • 数组写法

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

mapMutations

• 作用：帮助我们生成对应的commit方法，去联系mutations

• 写法

  • 数组写法

    写成和Mutations中同名的方法

  • 对象解法

  methods:{
      //靠mapActions生成：increment、decrement（对象形式）
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        
      //靠mapMutations生成：JIA、JIAN（对象形式）
      ...mapMutations(['JIA','JIAN']),
  }
  

细节：事件的回调函数不写参数依旧传参，传递的参数是事件对象event

mapMutations方法需要把原来写在commit中的传输数据写在模板代码的回调函数中

mapActions

• 作用：帮助我们生成对应的dispatch方法，去联系Actions

  代替以下代码：

  // 旧写法
  this.$store.dispatch('Actions中的事件名'，数据)
  

• 写法

  methods:{
      //靠mapActions生成：increment、decrement（对象形式）
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        
      //靠mapMutations生成：JIA、JIAN（对象形式）
      ...mapMutations(['JIA','JIAN']),
  }
  

备注

mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象

多组件共享数据

数据存储在vuex中，不同组件使用

Vuex模块化+命名空间

可以让vuex的编写更简洁、优雅。