vuex creating a product details page

Question

This is my first time using vuex so I am looking for some help. I have a products component and I would like to create a product component which will display the active products details. I think that I am nearly there but I am now stuck.

in my store I am setting activeProduct: null, in the state and I have a mutation

mutations: {
    setActiveProduct(state, product) {
      state.activeProduct = product
    }
  }

then my products page (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>

and my product page (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>

Any help getting this to work would be great! Thank you

Answer 1

我使用了一个吸气剂而不是一个突变来解决这个问题