vue.js - VueJS - 安装 Hook 时出错 : "TypeError: this.$store is undefined"

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

您没有导入 Vuex 并将商店添加到 Vue。

在您的索引文件中导入您的商店:

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store' // change path if necessary

然后使用它:

Vue.use(Vuex)

并将其添加到 Vue 中，以便可以通过 this.$store 访问它:

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

有一个官方演示存储库，设置最少:https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/app.js