vuex作为状态管理工具，对于父子组件通信有很多优势，初尝试代码：

index.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.use(Vuex)

Vue.config.productionTip = false

const store = new Vuex.Store({
  strict:true,
  state:{
    count:0
  },
  mutations:{
    addCount(state,arg){
      arg = arg||1;
      state.count += arg;
    },
    minusCount(state,arg){
      arg = arg||1;
      state.count -= arg;
    }
  },
  actions:{
    addCount1({commit},arg){
      commit('addCount',arg);
    },
    minusCount1({commit},arg){
      commit('minusCount',arg);
    }
  },
  getters:{

  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

item_list.vue

<template>
  <div>
    <input type="button" @click="fnPlus" value="+1" >
    <input type="button" @click="fnMinus" value="-1" >
  </div>
</template>

<script>
  export default {
    methods:{
      fnPlus(){
        this.$store.dispatch('addCount1',10);
      },
      fnMinus(){
        this.$store.dispatch('minusCount1',10);
      }
    }
  }
</script>

<style>
</style>

list.vue

<template>
  <div class="hello">
    <button @click="get()">获取</button>
    <div v-for="item in json">
      {{item.name}},{{item.price}},{{item.sales}}
    </div>
    <ListItem></ListItem>
    {{state.count}}
  </div>
</template>

<script>
import ListItem from './item_list'

export default {
  name: 'HelloWorld',
  data () {
    return {
      json: '',
      state:this.$store.state
    }
  },
  components:{
    ListItem
  },
  methods:{
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

分割线==================================
采用getters
index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  strict:true,
  state:{
    count:0,
    arr:[],
  },
  mutations:{
    addCount(state,arg){
      arg = arg||1;
      state.count += arg;
    },
    minusCount(state,arg){
      arg = arg||1;
      state.count -= arg;
    },
    setArr(state,arg){

      state.arr = arg;
      // state.arr.push(...arg);

      // arg.forEach((a) => {
      //   state.arr.push(a);
      // })
    },
  },
  actions:{
    addCount1({commit},arg){
      commit('addCount',arg);
    },
    minusCount1({commit},arg){
      commit('minusCount',arg);
    },
    async loadArr({commit},arg){
      let arr = await(await fetch('/a')).json();
      commit('setArr',arr);
    }
  },
  getters:{
    // a(){
    //   return 12;
    // }

     // async arr(state){
     arr(state){
      if(state.arr.length == 0){
        store.dispatch('loadArr');
      }
      // console.log(state.arr)
      return state.arr;
    }
  }
})

export default store;

vue

<template>
  <div class="hello">
    <button @click="get()">获取</button>
    <div v-for="item in json">
      {{item.name}},{{item.price}},{{item.sales}}
    </div>
    <ListItem></ListItem>
    {{state.count}}
    {{items}}
    <ul v-for="item in items">
      <li>{{item}}</li>
    </ul>
  </div>
</template>

<script>
import ListItem from './item_list'

export default {
  name: 'HelloWorld',
  data () {
    return {
      json: '',
      state:this.$store.state,
      // a:this.$store.getters.a,
      // items:this.$store.state.arr,
    }
  },
  computed:{
    items(){
      console.log(this.$store.getters.arr)
      // return this.$store.state.arr;
      return this.$store.getters.arr;
    }
  },
  async mounted(){
    // this.$store.dispatch('loadArr');
  },
  components:{
    ListItem
  },
  methods:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

结论：
手动触发action--------------------------适合异步操作
如果getters是异步的就很麻烦-------适合同步操作

数据交互---------------getters
其他异步操作---------action