Vuex学习笔记

推荐B站学习地址：https://www.bilibili.com/video/BV1h7411N7bg

1.state 定义全局变量的地方，可以在组件中直接使用this.$store.state.count的方式获取
   ---------------------------------------------------------------------------------------
   也可以通过import {mapState} from 'vuex'
   computed:{...mapState(['count'])}
2.mutation 用于变更state中的数据（可以集中监控数据的变化，只有mutation中的函数才有权力修改state中的数据）
   ※※：mutation中不能写异步的方法，比如延迟器（setTimeout）
   ※※:  如果必须要实现异步效果，就需要把异步代码写到与state,mutation同级的actions中
   在state同级定义mutations：{
			 add(state，args1){
			     state.count++
		                }
		             }
   在组件中定义方法直接{
		    this.$store.commit('add',args1)//触发mutations来修改state中的数据,args是传过来的参数
		}
   ---------------------------------------------------------------------------------------------------------------------
   也可以通过import {mapMutations} from 'vuex'
   methods:{...mapMutations(['add','addN'])}方式将vuex中的改变state的方法注册为组件的方法供此组件调用
   然后在通过自己定义的方法{this.add(args1)}即可
   ※不通过自定义方法去触发也可以，因为...mapMutations就相当于映射成自身组件的方法
3.actions  用于处理异步任务  //actions不能直接修改state中的数据，必须通过context.commit()触发某个mutation才行
   actions:{
     addAsync(context，args1){//定义形参
       setTimeout( ()=>{
           context.commit('add',args1)
         },100)
     }
   }
   然后通过自定义方法{
     this.$store.dispatch('addAsync',args1)
   }
   ------------------------------------------------------------------------------------------------------------------------
   也可以通过import {mapAction} from 'vuex'
   methods:{...mapAction(['addAsync','actionMethodsName'])}方式将vuex中的改变state的方法注册为组件的方法供此组件调用
   然后在通过自己定义的方法{this.addAsync(args1)}即可
   ※不通过自定义方法去触发也可以，因为...mapMutations就相当于映射成自身组件的方法
4.Getter用于对Store中的数据进行加工处理形成新的数据（1.不会修改store中的数据，类似于Vue中的计算属性 2.Store中的数据放生变化，Getter的数据也会跟着变化<响应式>）
   在state同级定义getters：{
     showNum:state =>{
        return '当前最新的数量是【' + state.count + '】'
     }
   }
   第一种使用方式：this.$store.getters.showNum
   第二种使用方式：import {mapGetters} from 'vuex'
	             computed:{...mapGetters(['showNum'])}