error using vuex Times
Cannot read property apply of undefined at VueComponent.mappedAction
my code:
<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,
}now I mainly report an error
as long as I use the addCartsAction function.