vuex -＞ 助手函数的原理

vuex：状态管理模式
js代码块

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

Vue.use(Vuex)//和router一样使用时要use

export default new Vuex.Store({
  //state里存放公共的状态
  state: {
    num: 5,
    uum: 10,
    sum: 0
  },
  //state中的状态如果需要动态请求获取那么这个请求的动作放在actions里，mutations里不可以写入异步请求
  actions: {
    // 1.基本语法
  //   addnumasync (context, n) {//模拟异步请求,
  //     setTimeout(() => {
  //       context.commit('setnum', n)
  //     }, 2000)
  //   }

    // 2.上面这种方法的简写形式
    addnumasync ({ commit }, n) {
      setTimeout(() => {
        commit('setnum', n)
      }, 2000)
    }
  },
  //mutations写入处理状态的方法
  mutations: {//这相当于methods方法
    //这里的方法可以有俩个参数，第二个自定义，第一个就是这个store实例上的state对象
    addnum (state, n) {
      state.num += n
      state.uum -= n
    },
    setnum (state, m) {
      state.sum = m
    }
  },
  modules: {

  }
})

vue代码块

<template>
  <div>
    <button @click="addnum">+</button>
    <button @click="addnumasync">async+</button>
    {{ $store.state.num }}
    {{ $store.state.uum }}
    {{ $store.state.sum }}
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      msg: 'xxx'
    }
  },
  methods: {
    addnumasync () {//异步的加加btn方法
      this.$store.dispatch('addnumasync', 2)//触发store上的dispatch，对应actions里的addnumasync异步请求操作,也可以传入第二个参数
    },
    addnum () {//正常加加的btn方法
      this.$store.commit('addnum', 6)//触发store实例上的commit 对应mutations里的addnum方法
    }
  },
  computed: {

  }
}
</script>

<style lang="scss" scoped>

</style>

vuex -> 助手函数

<template>
  <div>
    <button @click="addnum">+</button>
    <button @click="addnumasync">async+</button>
    {{ $store.state.num }}
    {{ num }}
  </div>
</template>
为什么用：每次获取state里的状态时都要前面一大坨this.$store.state.xxx 或者 this.$store.commit() 
或者 this.$store.dispatch() 相当的‘有依稀 ’ 为了方便获取它们 也不知道是谁给我们提供了
mapState([]) mapMutations([]) mapActions([])助手函数，，来吧

使用当然在.vue文件的script中impore{ mapState, mapMutations, mapActions} from 'vuex' 引入
调用mapState({'xx1', 'xx2'])函数执行过程：
<script>
{
	xx1 () {
		return store.state.xx1
	},
	xx2 () {
		return store.state.xx2
	}
}//这个形式和计算属性computed: { xx1 () { return this.$store.state.xx1 } } 很像
</script>
因为在上面的template里俩种渲染num的方式都可以，但是有一个原则dom上尽量少写入不必要的代码段 多多少少提高点加载速度，
<script>
语法：computed: {
	...muState(['xx1', 'xx2'])//xx1,xx2是state里的状态
	//其他方式 
    // 2.
    // ...mapState({
    //   xx1: state => state.xx1
    // })
    // 3.
    // ...mapState({
    //   xx1: 'xx1'
    // })
}
// this.xx1将state里的xx1直接映射到vue实例上 就可以通过this.来获取
// 原理：利用组件的计算属性 新增一个计算属性 依赖store中的某个状态
</script>
不能将其直接赋值给computed 如：computed: muState(['xx1', 'xx2']),这样会导致computed方法不可以有私有的内部方法 等于废了
...展开运算符进行浅拷贝，mapState也好mapMutations也好都是函数也是对象 进行赋值的时候牵扯到引用类型地址传递问题，参考浅拷贝和深拷贝
夫链接：https://zhuanlan.zhihu.com/p/330218772

调用 mapMutations(['aaa1', 'aaa2'])函数执行过程：
<script>
{
	aaa1(store, params){
    store.commit('aaa1',params)//aaa1为mutations里具体的方法名，params为参数，store就是new的store这个实例
  },
  	aaa2(store, params){
    store.commit('aaa1',params)
  }
}
</script>
//每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，
提交载荷作为第二个参数。（提交荷载在大多数情况下应该是一个对象）,提交荷载也可以省略的。
语法：
<template>
  <div>
    <button @click="addNum(5)">+</button>//等于<button @click="add(5)">+</button>
    {{ num }}
    {{ $store.state.uum }}
    {{ $store.state.sum }}
  </div>
</template>
<script>
export default {
  methods: {
    ...mapMutations([//方法一
      'addNum' // 映射 this.addNum() 为 this.$store.commit('addNum')
    ]),
    ...mapMutations({//方法二
      add: 'addNum' // 映射 this.add() 为 this.$store.commit('addNum')
    })
  }
</script>

调用 mapAations(['aaa1', 'aaa2'])函数执行过程：
<script>
{
	//基本和mapMutations一致
	aaa1 (store, params) {
		store.dispatch('aaa1', params)
	},
	aaa2 (store, params) {
		store.dispatch('aaa2', params)
	}
}
</script>
语法：
<template>
  <div>
    <button @click="addnumasync(10)">async+</button>//等于<button @click="add(10)">async+</button>
    {{ num }}
    {{ $store.state.uum }}
    {{ $store.state.sum }}
  </div>
</template>
<script>
export default {
  methods: {
    ...mapActions([
      'addnumasync' //映射 this.addnumasync() 为 this.$store.dispatch('addnumasync')
    ]),
    ...mapActions({
      add: 'addnumasync' //映射 this.add() 为 this.$store.dispatch('addnumasync')
    })
  }
</script>

总结：需要注意的是在使用mapMutations和mapActions的时候…mapMutations([‘名字’])和…mapActions([‘名字’])
名字需要保持对应相等，在template中@click指令指向的事件名和这里的名字 store对象里的mutations或者actions里定义的方法
保持一致，如果需要传参直接在事件@click="xx({obj})"里写入 ,再者如是使用上述 add:‘aaa1’ 这种方法, 只需把@click="xx"的xx改成add即可-----------