Vue.js (vuex)。 重新加載頁面時，計算屬性返回未定義。 （vuex 中對象數據的硬編碼數組）

Question

我正在用 Vue 建立一家鞋店，問題是當我嘗試通過 ShoeDetail 組件上的計算屬性訪問 getter 時，重新加載頁面時我變得不確定。我在 vuex 中存儲了一些硬編碼的對象數據數組state。 在 Shoe 組件中，我使用 v-for 循環數據並在 Men 視圖中輸出，這對我有用，所有可用的鞋子都會顯示出來。 當用戶點擊鞋子圖像時，會為每只鞋子加載一條新路線，其中包含被點擊的鞋子的更多詳細信息。 我正在使用 id 進行動態路由。 現在我在 vuex 中有一個吸氣劑

getProductById: (state) => (id) => {
      return state.sneakers.find((sneaker) => sneaker.productId === id);
    },

然后我通過計算屬性訪問它：

   product() {
      return this.$store.getters.getProductById(this.$route.params.id);
    },

效果很好，我可以通過 interpolitaion output 存儲在 vuex state 中的數據，例如：

{{product.brand}}

當我重新加載頁面時，我收到此錯誤：

**[Vue warn]: Error in render: "TypeError: Cannot read property 'brand' of undefined"
found in
---> <Detail> at src/components/ShoeDetail.vue
       <App> at src/App.vue
         <Root>**

我曾嘗試使用v-if="product"但由於我沒有撥打 API 電話，因此這不應該是相關的。 我還安裝了 createPersistedState 但它仍然無法正常工作。 我真的被困在這里，並提示我為什么在頁面重新加載時未定義我將不勝感激

我的 Vuex：

  
  
  
 
   
 
    
    import Vue from 'vue';
    import Vuex from 'vuex';
    import createPersistedState from 'vuex-persistedstate';

    Vue.use(Vuex);

    export default new Vuex.Store({
      plugins: [
        createPersistedState({
          key: 'keyname',
          storage: window.localStorage,
        }),
      ],
      state: {
        sneakers: [
          {
            productId: 1,
            productno: 1234,
            brand: 'nike',
            gender: 'men',
            size: 5,
            price: 150,
            image: require('@/assets/images/nike-air-zoom.jpg'),
          },
          {
            productId: 2,
            productno: 1235,
            brand: 'adidas',
            gender: 'men',
            size: 10,
            price: 140,
            image: require('@/assets/images/sneakers.jpg'),
          },

          {
            productId: 3,
            productno: 1236,
            brand: 'adidas',
            gender: 'men',
            size: 10,
            price: 130,
            image: require('@/assets/images/man-holding-nikes.jpg'),
          },
          {
            productId: 4,
            productno: 1237,
            brand: 'nike',
            gender: 'men',
            size: 5,
            price: 120,
            image: require('@/assets/images/nike-air-zoom.jpg'),
          },
          {
            productId: 5,
            productno: 1238,
            brand: 'adidas',
            gender: 'men',
            size: 10,
            price: 110,
            image: require('@/assets/images/sneakers.jpg'),
          },

          {
            productId: 6,
            productno: 1239,
            brand: 'adidas',
            size: 10,
            price: 100,
            image: require('@/assets/images/man-holding-nikes.jpg'),
          },
        ],
      },
      getters: {
        getProducts: (state) => {
          return state.sneakers;
        },
        getProductById: (state) => (id) => {
          return state.sneakers.find((sneaker) => sneaker.productId === id);
        },
      },
    });
 
   
 
  

鞋子組件：

  
  
  
 
   
 
    
    <template>
      <div class="shoe-container">
        <div class="shoe-card" v-for="element in products" :key="element.id">
          <router-link
            :to="{ name: 'ShoeDetail', params: { id: element.productId } }"
            ><img :src="element.image" tag="img" alt="" class="shoe-card__image"
          /></router-link>
          <p class="shoe-card__model">{{ element.brand }}</p>
          <p class="shoe-card__price">{{ element.price }} $</p>
        </div>
      </div>
    </template>

    <script>
    export default {
      computed: {
        products() {
          return this.$store.getters.getProducts;
        },
        product() {
          return this.$store.getters.getProductById(this.$route.params.id);
        },
      },
    };
    </script>

    <style lang="scss" scoped>
    @import '../sass/components/shoe';
    </style>
 
   
 
  

男性觀點：

  
  
  
 
   
 
    
    <template>
      <div>
        <navbar></navbar>
        <sub-nav></sub-nav>
        <filter-section></filter-section>
        <section class="shoes">
          <shoe></shoe>
        </section>
      </div>
    </template>

    <script>
    import Navbar from "../components/Navbar.vue";
    import SubNav from "../components/SubNav.vue";
    import FilterSection from "../components/FilterSection.vue";
    import Shoe from "../components/Shoe.vue";

    export default {
      components: {
        Navbar,
        SubNav,
        FilterSection,
        Shoe
      }
    };
    </script>

    <style lang="scss" scoped>
    @import "../sass/views/men";
    </style>
 
   
 
  

ShoeDetail 組件：

  
  
  
 
   
 
    
    <template>
      <div class="details">
       
        <h1>This is details</h1>
        <h2>{{ product.brand }}</h2>

      </div>
    </template>
    <script>
    export default {
      name: 'detail',

      computed: {
        product() {
          return this.$store.getters.getProductById(this.$route.params.id);
        },
      },
    };
    </script>

    <style lang="scss" scoped>
    @import '../sass/components/shoeDetail';
    </style>
 
   
 
  

Answer 1

感謝您的回答，我能夠通過在 ShoeDetail 的計算屬性中添加 parseInt 來修復它。

 computed: { product() { return this.$store.getters.getProductById( parseInt(this.$route.params.id) ); }, }

Answer 2

在 ShoeDetail 組件中執行此操作：

data: () => {
    data: '',
},
methods: {
    getProduct () {
    this.product = this.$store.getters.getProductById(this.$route.params.id);
    },
},
mounted () {
    this.getProduct();
}

它應該工作:)