vuex使用 实现点击按钮进行加减

//store.js
/**
 * vuex配置
 */

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

Vue.use(Vuex);

//定义属性（数据）
var state={
    count:6
}

//定义getters
var getters={
    count(state){
        return state.count;
    },
    isEvenOrOdd(state){
        return state.count%2==0?'偶数':'奇数';
    }
}

//定义actions，要执行的操作，如流程判断、异步请求等
const actions = {
    increment(context){//包含：commit、dispatch、state
        console.log(context);
        // context.commmit()
    },
    // increment({commit,state}){
    //     commit('increment'); //提交一个名为increment的变化，名称可自定义，可以认为是类型名
    // },
    decrement({commit,state}){
        if(state.count>10){
            commit('decrement');
        }
    },
    incrementAsync({commit,state}){
        //异步操作
        var p=new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve();
            },3000);
        });

        p.then(() => {
            commit('increment');
        }).catch(() => {
            console.log('异步操作');
        });
    }
}

//定义mutations，处理状态（数据）的改变
const mutations={
    increment(state){
        state.count++;
    },
    decrement(state){
        state.count--;
    }
}

//创建store对象
const store=new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

//导出store对象
export default store;

//main.js
import Vue from 'vue'
import App from './App.vue'

import store from './store.js' //导入store对象

new Vue({
  store, //配置store选项，指定为store对象，会自动将store对象注入到所有子组件中，在子组件中通过this.$store访问该store对象
  el: '#app',
  render: h => h(App)
})

//App.vue
<template>
  <div id="app">
    
    <button @click="increment">增加</button>
    <button @click="decrement">减小</button>
    <button @click="incrementAsync">增加</button>
    <p>当前数字为：{{count}}</p>
    <p>{{isEvenOrOdd}}</p>

  </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from 'vuex'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  //方式1：通过this.$store访问
  /*computed:{
    count(){
      return this.$store.state.count;
    }
  }*/
  /*computed:mapState([
    'count'
  ]),*/
  computed:mapGetters([
      'count',
      'isEvenOrOdd'
  ]),
  methods:mapActions([
      'increment',
      'decrement',
      'incrementAsync'
  ])
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>