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.基本使用

初始化数据、配置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,
})

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

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

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

6.store全新配置项 getter

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

在store.js中追加getters配置

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

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

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

7.四个map方法的使用

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

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中
}

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

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

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']),

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>