javascript - vuex 创建产品详情页面

问题描述

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

让它工作的任何帮助都会很棒！谢谢

标签： javascriptvue.jsvuex

javascript - vuex 创建产品详情页面

问题描述

解决方案

推荐阅读