vuex4的使用

import { createStore } from 'vuex'

 

export default createStore({

  state: {

    count:0

  },

  getters:{

    doubleCount:state=>state.count*2

  },

  mutations: {

    addCount(state,payload=1){

      state.count+=payload;

    }

  },

  actions: {

    asyncAddCount(context){

      setTimeout(()=>{

        context.commit('addCount');

      },1500)

    }

  },

  modules: {

  }

})

 

<template>

  <div id="app">

    <img src="./assets/logo.png">

     <EightQueen msg="Hello Vue in CodeSandbox!"/>

     <button id="add">add</button>

     <div><button @click='addCount(3)'>vuexCount</button>{{count1}}-{{doubleCount}}</div>

     <div id="app2"></div>

  </div>

  

</template>

 

<script>

import EightQueen from "./components/EightQueen";

import {mapGetters,mapState,mapMutations,mapActions} from'vuex';

 

export default {

  data() {

    return {

      a: true,

      ab: true

    };

  },

  components: {

    EightQueen

  },

  computed:{

    // count(){

    //   return this.$store.state.count

    // },

    // doubleCount(){

    //   return this.$store.getters.doubleCount

    // }

    ...mapGetters([    

    'doubleCount'

    ]),

    ...mapState({

      count1:state=>state.count

    })

  },

  methods: {

    // increment() {

    //   console.log(this.$store.getters)

    //   this.$store.commit("addCount",3);

    // },

    ...mapMutations(['addCount']),

    ...mapActions(['asyncAddCount'])

    // asyncCount(){

    //   this.$store.dispatch('asyncAddCount');

    // }

  }

};

</script>