import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // state就是所有的数据
  state: {
    data: '我是vuex里面的数据',
    data1: 0,
    data2: 1
  },
  mutations: {
    changeData (state, type) {
      state.data = type
    }
  },
  actions:  {
    asyncChangeData (context, type) {
      // context就是与 store 实例具有相同方法和属性的 对象
      setTimeout(() => {
        context.commit('changeData', type)
      }, 2000)
    }
  },
  getters: {
    data4 (state, type) {
      return state.data.split('').reverse().join('')
    }
  }
})

export default store

computed: {
    // 获取state中三个值
   data () {
     return this.$store.state.data
   },
   data1 () {
     return this.$store.state.data1
   },
   data2 () {
     return this.$store.state.data2
   }

import { mapState } from 'vuex'

computed: {
	// 第一种书写形式：想用哪一个数据，直接使用 ...mapState 映射出哪一个数据就好
	...mapState(['data2', 'data1', 'data'])
	// 第二种书写形式：以对象的形式映射进来，可以在自己的组件中起一个别名，template页面可直接使用 a 进行渲染
  	...mapState({
  		a: 'data2',
  		data1: 'data1'
  	})
}

// 第三种书写形式：直接把整个 mapState 给到了 computed。不能再用计算属性去做别的事情了
computed: mapState(['data1', 'data2', 'data']),

// 第四种书写形式：不能再用计算属性去做别的事情了
computed: mapState({
    data: 'data',
    data1: 'data1',
    a: 'data2'
}),

//总结：
 computed: {
      ...mapState(['属性名称', '属性名称', '...'])
    }
 computed: {
      ...mapState({
        在自己组件中使用的名称: 'state 中的数据名称'
      })
    }
 computed: mapState(['属性名称', '属性名称', '...'])
 computed: mapState({
        在自己组件中使用的名称: 'state 中的数据名称'
      })

computed: {
    data () {
      // 获取到的是反转后的字符串
      return this.$store.getters.data4
    },

//和 映射 state 的区别，就是把 mapState 换成  mapGetters
import { mapGetters } from 'vuex'
computed: {
    // 也是四种方式，和 mapState 一样
    // 第一种
    ...mapGetters(['data4'])
    // 第二种 
    ...mapGetters({
      a: 'data4'
    })
  }
// 第三种 直接把整个 mapState 给到了 computed
computed: mapGetters(['data4']),

// 第四种
computed: mapGetters({
    a: 'data4'
}),

<button @click="changeData">改变 state 中的数据</button>

methods: {
	changeData () {
	   this.$store.commit('changeData', this.msg)
	}
}

import { mapMutations } from 'vuex'
// 第一种方式
<button @click="changeData2">改变 state 中的数据</button>

methods: {
	// mutations 映射在 methods 里面
    // 在 methods 的别的方法里面可以直接 this.函数名称来调用，就等价于 commit 在提交它
	...mapMutations(['changeData']),
	changeData2 () {
    	this.changeData(this.msg)
    }
}

// 可以简写成 直接把参数绑定在事件名称的后面
<button @click="changeData(msg)">改变 state 中的数据</button>

methods: {
	...mapMutations(['changeData'])
}

// 第二种方式
<button @click="abc(msg)">改变 state 中的数据</button>

...mapMutations({
    abc: 'changeData'
}),


// 映射进来以后，如果你做得事件处理函数里面只有一个事情，可以直接把他绑定在事件名称的后面，也就是 上面的简写
// 什么叫不只有一件事，比如在this.changeData(this.msg)上面加一个输出console.log('111') 就算是两件事，就不能使用简写
// 总结
methods: {
    ...mapMutations(['方法名称', '方法名称', '...'])
  }
  
methods: {
    ...mapMutations({
      在当前组件中使用的名称: 'mutations 中的名称'
    })
  }

<button @click="changeData">改变 state 中的数据</button>
changeData () {
    this.$store.dispatch('asyncChangeData', this.msg)
},

import { mapActions } from 'vuex'
// 第一种方式
<button @click="changeData">改变 state 中的数据</button>
methods: {
	...mapActions(['asyncChangeData'])
	changeData () {
    	this.asyncChangeData(this.msg)
    },
}
// 或者直接把参数绑定在事件名后面
<button @click="asyncChangeData(msg)">改变 state 中的数据</button>
methods: {
	...mapActions(['asyncChangeData'])
}

// 第二种方式
<button @click="abc(msg)">改变 state 中的数据</button>
methods: {
	...mapActions({
	    abc: 'asyncChangeData'
	}),
}

getters （和 映射 state 的区别，就是把 mapState 换成  mapGetters）
actions （和映射 mutations 的区别就是把 mapMutations 换成 mapActions）

  var Event=new Vue();
  Event.$emit(事件名,数据);
  Event.$on(事件名,data => {});

![](http://wason419.github.io/img/20200630/2020063003.png)  

如上图所示$attrs表示没有继承数据的对象，格式为{属性名：属性值}。Vue2.4提供了$attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。

简单来说：`$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件`。

<a id='anc6'></a>
### 6. provide / inject ###  
1.简介
Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。


2.举个例子
假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件

可以看到，在 A.vue 里，我们设置了一个 provide: name，值为 浪里行舟，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。这就是 provide / inject API 最核心的用法。

需要注意的是：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue官方文档
所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 浪里行舟。


3.provide与inject 怎么实现数据响应式
一般来说，有两种办法：

+ provide祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如props，methods
+ 使用2.6最新API Vue.observable 优化响应式 provide(推荐)
我们来看个例子：孙组件D、E和F获取A组件传递过来的color值，并能实现数据响应式变化，即A组件的color变化后，组件D、E、F会跟着变（核心代码如下：）

![](http://wason419.github.io/img/20200630/2020063004.png)