vuex 状态

state

记录初始状态,如现在count = 0

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

mutation

因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state

const store = new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    // 加1
    increment(state) { //自动获取的
      state.count++;
    },
    // 减1
    decrement(state) {
      state.count--
    }
  }
})

action

action去commit 一个mutation来触发突变，也就是说在mutation里面定义的是回调方法，而在actions里面通过类似事件调用的方式来触发commit从而实现突变。

函数也会自动获得一个默认参数context, 它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令

const store = new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    // 加1
    INCREMENT(state) {
      state.count++;
    },
    // 减1
    DECREMENT(state) {
      state.count--
    }
  },
  actions: {
    increment(context) { // store 实例
      context.commit("INCREMENT");
    },
    decrement(context) {
      context.commit("DECREMENT");
    }
  }
})

actions: {
    increment({commit}){ //直接结构
      commit("INCREMENT")
    },
    decrement({commit}){
      commit("DECREMENT")
    }
  }

dispatch

现在就剩下dispatch action 了。什么时候dispatch action 呢？ 只有当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.

<template>
 <div>
  <div>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
 </div>
</template>

<script>
  export default {
    methods: {
      increment(){
        this.$store.dispatch("increment"); // actions
      },
      decrement() {
        this.$store.dispatch("decrement")
      }
    }
  }
</script>