Vue组件间通信--Vuex

1.概念

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

2.何时使用？

​多个组件依赖于同一状态

来自不同组件的行为需要变更同一状态

3.vuex工作原理 

 

如组件Count进行+2操作，通过store.dispatch('jia',2)分发给actions 

 Actions:对象 key是动作类型 value是个函数，在此函数内调用store.commit提交给Mutations

Mutations:对象，里面是function进行加2操作 后State内对对应的sum自动改变

Mutations里面不要写任何业务逻辑和ajax请求。

随后vuex可以重新解析组件，渲染页面

4.搭建vuex环境

1. 创建文件：src/store/index.js

npm i vuex 

注：2022年2月7日，vue3成为默认版本，vuex也更新到了4版本。现在执行npm i vuex 安装的是vuex4，vuex4只能在vue3中使用

vue2中，要用vuex的3版本

vue3中，要用vuex的4版本

npm i vuex@3

---------------------------------------------------------------------------------------------------------------------------------

在脚手架里写import，不管import在哪个位置，它会扫描整个文件的import语句，然后把所有import语句按编写顺序汇总到最上方。所以如果在main.js中使用vuex的话，会优先执行

import store from './store'

然后再执行

Vue.use(Vuex)

导致顺序错误，所以在src/store/index.js中应用vuex插件

//引入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
})

2.在main.js中创建vm时传入store配置项  让所有组件实例对象vc看见store

......
//引入store
import store from './store' //当没说哪个文件时，默认就是文件下的index.js
......

//创建vm
new Vue({
 el:'#app',
 render: h => h(App),
	store
})

5.基本使用

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

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

2. 组件中读取vuex中的数据：$store.state.sum

3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

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

-------------------------------------------------------------------------------------------------------------------------------

6.store全新配置项 getter

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

2. 在store.js中追加getters配置

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

3. 组件中读取数据：$store.getters.bigSum

------------------------------------------------------------------------------------------------------------------------------- 

7.四个map方法的使用                                                                                                           

   import {mapState,mapGetters，mapActions,mapMutations} from 'vuex'

1. mapState方法：用于帮助我们映射state中的数据为计算属性                                         

   
   computed:{
             //  靠程序员自己亲自去写计算属性
             he(){
                 return this.$store.state.sum
             },
             xuexiao(){
                   return this.$store.state.school
               },
             xueke(){
                   return this.$store.state.subject
               },
               //借助mapState生成计算属性 ，从state中读取数据 （对象写法）
               ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
               //借助mapState生成计算属性 ，从state中读取数据 （数组写法） 生成的计算属性的名和你真正要读取的state中的名要相同
               // 相当于sum:'sum'
               ...mapState(['sum','school','subject']),
             //  ...obj, 相当于把obj中内容依次取出放入到obj中
   出放入到obj中
   }

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

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

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

    //程序员自己写
               /*incrementOdd(){
                   this.$store.dispatch('odd',this.n)
   
               },
               incrementWait(){
                       this.$store.dispatch('wait',this.n)
               }*/
               //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
               ...mapActions({incrementOdd:'odd',incrementWait:'wait'}),
   
               //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
               //使用数组写法 点击事件名 和dispatch分发给actions的名字都要是'odd','wait'
               // ...mapActions(['odd','wait']),

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

   methods:{
              // 程序员自己写
              /* increment(){
                   this.$store.commit('JIA',this.n)
   
               },
               decrement(){
                   this.$store.commit('JIAN',this.n)
   
               },*/
               //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法）
               ...mapMutations({increment:'JIA',decrement:'JIAN'}),
               //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法）
               //使用数组写法 点击事件名 和commit提交给mutations的名字都要是'JIA','JIAN'
               // ...mapMutations(['JIA','JIAN']),
   

备注：mapActions与mapMutations使用时，若需要传递参数(this.n)

需要在模板中绑定事件时传递好参数，否则参数默认是事件对象。

<button @click="increment(n)">+</button>

<button @click="decrement(n)">-</button>

<button @click="incrementOdd(n)">当前求和为奇数再加</button>

<button @click="incrementWait(n)">等一等在加</button>