Question

我无法确定的VueJS页面出现错误。完整错误为[Vue warn]: Error in mounted hook: "TypeError: this.$store is undefined"。我什至把它的范围缩小到导致它的特定代码行。这是我的.vue文件中的相关代码：

 <template>
  <div
    id="recommendedProductsDetailsHorizontal"
    :class="['imageSliderContainer', itemsPerPageCssStyle]"
    style="width:100%;height:374px;">
    <h2>{{ params.headerText }}</h2>
    <div
      class="wrapper"
      style="height:355px;">
      <div class="carousel-view">
        <carousel
          :navigation-enabled="true"
          :min-swipe-distance="1"
          :per-page="5"
          navigation-next-label="<i class='fas fa-angle-right'></i>"
          navigation-prev-label="<i class='fas fa-angle-left'></i>">
          <slide
            v-for="product in products"
            :key="product.id">
            <div class="img-container">
              <a
                href="#"
                class="handCursor"
                tabindex="0">
                <img
                  :src="product.img"
                  :alt="'Product #' + product.id">
              </a>
            </div>
            <h4>Product #{{ product.id }}</h4>
            <div class="price-div">
              <div class="allPriceDescriptionPage">${{ product.price }}</div>
            </div>
            <a
              href="#"
              tabindex="0"
              name="instantadd">
              <div class="btn_CA_Search buttonSearch gradient"> Add to Cart</div>
            </a>
          </slide>
        </carousel>
      </div>
    </div>
  </div>
</template>

<script>
  import Slider from './Slider'
  import {mapState} from 'vuex'

  export default {
    name: "Slider",
    components: {
      Slider
    },
    props: {
      numSlides: {
        type: Number,
        default: 5
      },
      itemsPerPageCssStyle: {
        type: String,
        default: "slider5buckets" // need to eventually make this dynamic, logic is in GridDynamic_DynamicProductRecs.java on lines 125-130
      }
    },
    data: function () {
      return {
        products: [
          {id: 1, img: 'https://placeimg.com/100/100', price: 4.56},
          {id: 2, img: 'https://placeimg.com/101/101', price: 1.23},
          {id: 3, img: 'https://placeimg.com/102/102', price: 2.34},
          {id: 4, img: 'https://placeimg.com/103/103', price: 9.87},
          {id: 5, img: 'https://placeimg.com/104/104', price: 3.45},
          {id: 6, img: 'https://placeimg.com/105/105', price: 12.34},
        ],
        params: this.$parent.params
      }
    },
    computed: {
      ...mapState({
        selStore: state => state.selectedStore,
        baseUri: state => state.uri.application || '/main/',
        serviceHost: state => `${state.uri.service}`
      })
    },
    mounted() {
      console.log('strategy: ' + this.params.strategy);
      this.initSlider();
    },
    methods: {
      initSlider () {
        let vm = this;
        let vmStore = vm.selStore.id; // this is causing the error

这是导致错误的最后一行。当我注释掉并构建时，没有任何错误。

编辑： 这是我的index.js文件，这是我的入口点：

import Vue from 'vue';
import {mapState} from 'vuex';
import VueCarousel from 'vue-carousel';
import ProductSlider from '../../components/slider/ProductRecommendationsSlider'

Vue.use(VueCarousel);

window.qubitProductDetailsRecommendationsVue=function(compositeModelNumbers) {
  var params = {
    compositeModelNumbers: compositeModelNumbers,
    strategy: 'pp1',
    backupStrategy: 'popular',
    divId: 'recommendedProductsDetailsHorizontal',
    isVertical: false,
    isHideHeaderText: false,
    headerText: 'Guests Who Viewed This Item Also Viewed These',
    backupHeaderText: 'Popular Products',
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    qubitResponseMap: null
  };

  /* eslint-disable no-new */
  new Vue({
    el: '#recommendedProductsDetailsHorizontal',
    components: {ProductSlider},
    data: { params },
    template: '<product-slider/>'
  });
};

Answer 1

您不是要导入const featuredMakes = makes.filter(makes => makes.featured === true); var featured = Object.keys(featuredMakes).map(function(s){ console.log(featuredMakes[s].title); return ( <Col className="mb-3"> <Link key={featuredMakes[s].title} href={{ pathname: '/deal-list', query: query }} as={{ pathname: '/filter', query: query }} passHref > <a> <img style={{ height: '80px', width: '80px' }} src={featuredMakes[s].logo} alt={featuredMakes[s].title + ' logo'} /> </a> </Link> </Col> ); });并将商店添加到<Row>{this.renderFeaturedMakes(makes)}</Row>。

在索引文件中导入商店：

Vuex

然后使用它：

Vue

并将其添加到Vue，以便可以通过import Vue from 'vue' import Vuex from 'vuex' import store from './store' // change path if necessary进行访问：

Vue.use(Vuex)

有一个最小的设置的官方演示仓库：https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/app.js

VueJS-挂接钩中出现错误：“ TypeError：this。$ store未定义”

1 个答案: