全网vuex的基本用法

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

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

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

1.  // 第一种获取方式
 {{$store.state.count}}
 this.$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(['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()
 }  
}