vuex的基础学习

store（读：死多）文件夹的index.js文件，创建state

const store = new Vuex.Store({
    state: {
       count: 0
    },
})

获取state（读：死的特）里面的count的二种方式

// 第一种获取方式
{{$store.state.count}}

// 第二种获取方式
{{count}}
import { mapState } from 'vuex'
computed: {
    ...mapState(['count'])
},

mutations (读： 秒特小)  通过一个方法，改变state里面count的值的变化

 //   页面写法，  commit的作用，就是调用某个mutation 函数
btnHandler () {
  this.$store.commit('add')
},

// store写法  他有两个参数，第一参数是自身，第二个是外部传进来的参数
add (state) {
   state.count++
},

mutations 第二种使用方式

不要在mutations函数中，执行异步操作

import { mapMutations } from 'vuex'

methods: {
   ...mapMutations(['sub', 'subN']),
   btnhadnler2 () {
      this.subN(3)
    }
}

actions （读：ak死） 用于处理异步任务

这个里面的 commit 只能用mutations函数中的方法

只能用dispatch(读：D死派曲)方法去执行action里面的方法

只有mutations中定义的函数，才有权利修改state中的数据

// 页面写法
methods: {
	handle() {
		this.$store.dispatch('addAsync')
	}
}

// store里面的写法， 
actions:{
	addAsync(context) {
		setTimeout(()=>{
			context.commit('add')
		},1000)
	}
}	

actions 第二种使用方法

import { mapActions } from 'vuex'

methods: {
 ...mapActions(['subAsync']),
 btnhadnler3 () {
   this.subAsync()
 }  
}