Vuex详解

1.vuex是什么？

我们之前学过，兄弟组件之间的通信可以使用全局事件总线来实现，但是当组件数目过多时，采用全局事件总线的办法过于繁琐，因此我们引出了vuex来专门解决共享数据这个问题的。

2.什么时候使用Vuex

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

3.Vuex的原理图

绿色虚线区为vuex的重要组成部分：actions，mutations，state

步骤：
1.npm i vuex
2.Vue.use(Vuex)
3.store
4.所有的vc（组件）都能看到store

4.搭建vuex环境

1.控制台输入：npm i vuex@3
（因为我们现在使用的是vue2，所有与它配套使用的vuex的版本是3）
2.引入vuex
import Vuex from ‘vuex’
3.使用插件
Vue.use(Vuex)

Vue项目中的store下面的index.js，该文件用于创建Vuex中最为核心的store`

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions={}
//准备mutations--用于操作数据（state）
const actions={}
//准备state--用于存储数据
const state={}
//创建store
const store =new Vuex.Store({
actions,
mutations,
state,
})
//暴露store
export default store

methods: {
increment(){
this.$store.diaspatch(‘jia’,this.n),}
}
//准备actions
const actions={
jia(context,value){
console.log(‘actions中的jia被调用了’)
context.commit(‘JIA’,value)
},
}
//准备mutations
const mutations={
JIA(state,value){
console.log(‘mutations中的JIA被调用了’)
state.sum+=value
}
}
//准备state
const state={
sum:0//当前的和
}

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

5.Vuex的开发者工具

vuex的开发者工具和vue的开发者工具是同一个，选择第二个按钮可以切换到vuex的开发者工具

6.getters配置项

计算属性跨组件就不可以使用了，只适用于当前组件
而getters是定义在vuex中的配置项，它和计算属性一样都是通过返回值来返回数据
当state中的数据需要加工后再使用时，可以使用getters加工

//准备getters--用于将state中的数据进行加工
consts getters={
bigSum(state)
{
return state.sum*10
}
}

7.mapState（映射状态）和mapGetters

1.借助mapState生成计算属性，从state中读取数据（对象写法）

import   {mapState} from 'vuex'

mounted(){
const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
console.log(x)
}

写在计算属性中

computed：{
...mapState({he:'sum',xuexiao:'school',xueke:'subject'})
//...是ES6新特性
}

2.简写方式,借助mapState生成计算属性，从state中读取数据（数组写法）

...mapState(['sum','school','subject']),

3.mapGetters和mapState使用方法一样，不过是从getters中读取数据

8.mapActions和mapMutations

1.借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）

...mapMutations({increment:'JIA',decrement:'JIAN'})

9.面试回答

1.vuex的流程
页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去