在使用vuex時報錯
Cannot read property apply of undefined at VueComponent.mappedAction

我的代碼：

  <div>
    商品列表
    <ul v-for="product in products">
      <li>{{product.title}} - {{product.price}}</li>
      <button @click="addCartsAction(product.id)">添加購物車</button>
    </ul>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    name: "product-list",
    computed: {
      ...mapState(['products'])
    },
    methods: {
      ...mapActions(['addCartsAction'])
    },
  }
</script>
<style scoped>
</style>


//store/index文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
var state = {
  products: [
    {"id": 1, "title": "iPad 4 Mini", "price": 500.01},
    {"id": 2, "title": "H&M T-Shirt White", "price": 10.99},
    {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99}
  ],
  carts: [{id: 1, count: 1}]
};
var actions = {
  addCartsAction({state, commit}, id) {
    commit('addCarts', id)
  }
};
var mutations = {
  addCarts(state, id) {
    state.carts.push({
      id: id,
      count: 1
    })
  }
};
export default {
  state,
  mutations,
  actions,
}

我現(xiàn)在主要是只要使用addCartsAction函數(shù)就會報錯