vuex用法

<template>
  <div>
    <button>删除事件</button>
    <button @click="clickVuexEvent()">点击触发vuex事件</button>
    <button @click="oddJia()">奇数时候再加</button>
    <button @click="waitAdd()">延迟时候再加</button>
    <!-- <button @click="this.$store.state.isNum++">点击触发vuex事件</button> -->
    {{ this.$store.state.isNum }}
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    // 点击加
    clickVuexEvent() {
      console.log("vuex事件");
      this.$store.dispatch("JIA", 1);  // 这个1是组件页面传过来的第二个参数    这个是先调 actions 里面的方法处理逻辑，然后在 actions 里面再去 commit 调 mutation 里面的方法，修改 state
      // this.$store.commit('JIA',2)   // 这个是省略 actions ， 直接调 mutation 的方法
    },
  },
};
</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    drawer: false,
    isNum:1,
    isUserId:undefined,
    isUHeadP:undefined,
  },
  actions: {
    JIA({commit},value){
        // console.log('ACTIONS中',a,value);
        commit('addNum',value)
    },
    oddJia(context,b){
      // context 参数是一个getter
      console.log('vuex里面的奇数加方法触发了',context.state.isNum,b)
      if(context.state.isNum % 2){
        context.commit('addNum',b)
      }
    },
    waitAdd({commit},value){
      // console.log('ACTIONS中',a,value);
      setTimeout(() => {
        console.log("延迟加");
      commit('addNum',value)
      },1000);
  },
  },
  mutations: {
    addNum(state,value){
      state.isNum += value
  }
  },
  modules: {
  }
})

state 类似于组件中的data 选项，用来存储vuex数据。
action 可以在里面进行异步操作，复杂的逻辑也写在这里面。commit 提交调用执行 mutation 里面的方法。
mutation 在 mutation 中修改 state 中的状态。
getter 类似于组件中的计算属性。这个getter 可以全局使用。就是计算属性。

mapState,mapMutation,mapGetter等等。映射 类似于语法糖。在组件中使用
import { mapState } from ‘vuex’
引入 。在计算属性中 使用。…mapState([‘total’]) 展开运算符。这时就可以在组件中使用 vuex 中的 total 这个数据了