这是我第一次使用vuex,因此我正在寻求帮助。我有一个产品组件,我想创建一个产品组件,该组件将显示活动的产品详细信息。我认为我快要在那里了,但是现在我被困住了。
我正在设置我的商店
activeProduct: null,
处于状态并且我有突变
mutations: {
setActiveProduct(state, product) {
state.activeProduct = product
}
}
然后进入我的产品页面(results.vue)
<template>
<div class="results">
<h1>Results</h1>
<ul>
<li v-for="product in products" :key="product.Vehicle.id">
<img v-bind:src="product.Vehicle.Url">
<div>
<h3>
{{ product.Vehicle.Manufacturer }}
{{ product.Vehicle.Model }}
</h3>
<h3>
<router-link
:to="'./Vehicle/'+product.Vehicle.id"
@input="setActiveProduct"
:value="$store.state.activeProduct"
><button>More</button></router-link>
</h3>
</div>
</li>
</ul>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
name: 'Results',
data() {
return {};
},
computed: {
...mapState([
'products',
'activeProduct'
])
},
methods: {
...mapMutations([
'setActiveProduct'
]),
setActiveProduct(val) {
this.$store.commit('setActiveProduct', val)
}
}
};
</script>
<style scoped lang="scss">
ul {
list-style-type: none;
padding: 0;
}
</style>
和我的产品页面(vehicle.vue)
<template>
<div class="Vehicle">
<h1>Vehicle</h1>
<pre>store.$state.activeProduct: {{ $store.state.activeProduct }}</pre>
<!-- {{ activeProduct.Vehicle.Manufacturer }}
{{ activeProduct.Vehicle.Model }} -->
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
name: 'Vehicle',
data() {
return {
product: this.$store.getters.productById(this.$route.params['id'])
}
},
computed: {
...mapState([
'products',
'activeProduct'
]),
store() {
return this.$store.state
}
}
}
</script>
任何帮助使它正常工作的方法都是很棒的!谢谢
答案 0 :(得分:0)
我用吸气剂代替了突变来解决这个问题