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>