VueJS - Error in mounted hook: "TypeError: this.$store is undefined"

Question

I'm getting an error my VueJS page that I have been unable to figure out. The full error is [Vue warn]: Error in mounted hook: "TypeError: this.$store is undefined". I've even got it narrowed down to a specific line of code that causes it. Here is the relevant code from my .vue file:

 <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

It is the last line that is causing the error. When I comment that out and build I get no errors.

Edit: Here is my index.js file which is my entry point:

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

You are not importing Vuex and adding the store to Vue.

In your index file import your store:

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

Then use it:

Vue.use(Vuex)

And add it to Vue so that it can accessed via this.$store:

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

There is an official demo repo with minimal setup: https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/app.js