vuex学习

state

访问stata中数据的第一种方式

//在script中使用
var count = this.$store.state.count;
//在template中使用，并且this是可以省略的
<p>{{$store.state.count}}</p> 

访问stata中数据的第二种方式

//1.从vuex中按需导入mapState函数
import {mapState} from 'vuex'
//2将全局数据，映射为当前组件的计算属性
computed:{
...mapState(['count'])
}

Mutation

Mutation用于变更Store中的数据，不能执行异步的方法（setTimeout）
1.只能通过mutation变更Store的数据，不可以直接操作store的数据。
2.通过这种方式虽然看起来稍微繁琐一些，但是可以集中监控所有数据的变化。

//创建mutation函数
export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    }
  }
})；
//触发mutation
 methods: {
    handleFn() {
      //commit的作用是调用mutation
      this.$store.commit('add')
    }
  }

Mutation传递参数
1.因为mutations和actions不支持传递多个参数的，这里的参数又称“载荷”（Payload）。如果需要传递多个参数可以采用数组或者对象的方式传递

//数组形式传递多个参数
export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    addN(state,[parm1,parm2]){
      state.count+=step1
    }
  }
})
//调用
 handleFn2(){
   this.$store.commit('addN',[2,3])
 }
//对象形式传递多个参数
export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    addN(state,data){
      state.count+=data.parm1
    }
  }
})
//commit调用
handleFn2(){
  this.$store.commit('addN',{parm1:2,parm2:4})
}
//辅助函数调用mapMutations
import { mapMutations } from 'vuex'
methods: {
   ...mapMutations(['sub']),
   handleFn() {
      this.sub();
   }
  }

Action

Action用于处理异步任务。
如果通过异步操作变更数据，必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发mutation的方式间接变更数据

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    }
  },
  actions: {
    addAsync(context){
      setTimeout(()=>{
        context.commit("add");
      },1000);
    }
  }
})
//第一种方式调用dispatch
methods: {
  handleFn3() {
    this.$store.dispatch('addAsync')
  }
}
//第二种辅助函数调用

Action传递参数的形式和Mutation大体相同。