Question

这是我第一次使用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>

任何帮助使它正常工作的方法都是很棒的！谢谢

Answer 1

我用吸气剂代替了突变来解决这个问题

vuex创建产品详细信息页面

1 个答案: