vuex中state和mutation用法

State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
      state : {  count : 0 }
})

组件访问State中数据的第一种方式：

this.$store.state.全局数据名称

在<template>中this.可省略。。。

 

组件访问State中数据的第二种方式：

//1 从vuex中按需要导入mapState函数
import { mapState } from 'vuex'
 通过刚才的mapState函数，将当前组件需要的全局数据，映射为当前的computed计算属性：

//2 将全局数据，映射为当前组件的计算属性
computed: {
     ...mapState(['count'])
  }

Mutation

Mutation用于变更store中的数据。

只能通过Mutation变更，不可以直接操作store中的数据。
通过这种方式虽然操作起来稍微繁琐，但是可以集中监控所有数据变化。
触发Mutation的第一种方式：this.$store.commit

//定义Mutation
const store = new Vuex.Store({
     state: {
         count:0
    },
    mutations: {
        add(state){
         //变更状态
         state.count++
       }
    }
 }) 
//触发Mutation
methods: {
      handle1(){
    //触发Mutation 的第一种方式
      this.$store.commit('add')
    }
  }
也可以在触发时传递参数

//定义Mutation
const store = new Vuex.Store({
    state: {
        count:0
      },
    mutations: {
       addN(state, step) {
      //变更状态
       state.count += step
     }
   }
})
//触发Mutation
methods: {
     handle2() {
      //调用commit函数
      //触发mutations是携带参数
     this.$store.commit('addN',3)
  }
}

触发Mutation的第二种方式：

//1 从vuex中按需导入mapMutation函数
import { mapMutationa } from 'vuex'
通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法：

methods: {
   ...mapMutations(['add','addN']}
 }