Vuex getter return undefined value

Question

I have my store and I make a call to a getter but it returns undefined, I tried to print the store param value in store and is undefined too, but, when the page refresh it works fine.

this is the store.js, the getter is called courseById

export const store = new Vuex.Store({
  state: {
    title: "CBCode",
    courseCategories: [
      {
        title: "Fundamentos de Programación",
        categoryName: "fundamentos",
        description:
          "Eres nuevo en la programación? Estas en el lugar indicado, aqui contarás con todo lo necesario para empezar",
        links: ["PSeInt", "C++"],
        color: "is-success"
      },
    ],
    courses: [
      {
        id: 1,
        name: "PSeInt",
        category: "fundamentos"
      },
      {
        id: 2,
        name: "C++",
        category: "fundamentos"
      },
      {
        id: 3,
        name: "C#",
        category: "poo"
      },
    ],
    dailyUpdates: [
      "@usuario ha terminado un curso",
      "Tienes nuevos mensajes en la bandeja",
      "Hay un nuevo usuario",
      "Hay esto bla",
      "lorem ipsum dolor quien sabe que"
    ]
  },
  getters: {
    categoryColor: state => categoryName => {
      return state.courseCategories.filter(
        category => category.categoryName == categoryName
      )[0];
    },
    courses: state => {
      // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
      let array = state.courses;

      let currentIndex = array.length,
        temporaryValue,
        randomIndex;

      // While there remain elements to shuffle...
      while (0 !== currentIndex) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

      return array;
    },
    coursesPaginated: state => {
      let arrays = [],
        size = 3;
      while (state.courses.length > 0)
        arrays.push(state.courses.splice(0, size));

      return arrays;
    },
    courseById: state => id => {

      console.log(state)

      return state.courses.find(course => parseInt(course.id) === parseInt(id));
    }
  },

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { store } from "./store/store";
import toastr from "toastr";
import "./registerServiceWorker";

import "./sass/styles.scss";

Vue.config.productionTip = false;

toastr.options = {
  positionClass: "toast-top-right"
};

Vue.prototype.$toastr = toastr;

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount("#app");

This is my component

<template>
  <div>
    <form>
      <div class="form-control">
        <label class="label has-text-white">Nombre:</label>
        <input type="text" class="input" v-model="course.name">
      </div>
      <hr>
      <button class="button is-primary" @click="updateCourse">Actualizar</button>
    </form>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "DashboardEditCourse",
  data: () => ({
    course: {
      id: 0,
      title: "",
      name: ""
    }
  }),
  methods: {
    updateCourse() {
      this.$store.commit("UPDATE_COURSE", this.course);
    }
  },
  computed: {
    ...mapGetters(['courseById'])
  },
  mounted() {
    console.log(this.courseById(this.$route.params.id));
    this.course = this.courseById(this.$route.params.id);
  }
};
</script>

I have used other lifecycle hook and nothing, in getter I used filter instead find and nothing :/

Your `getter` looks fine, can you show how you are initializing your Store? I have a feeling that your store initialization is incorrect. — Daniel Ormeño, Mar 09 '19 at 01:11
Can you update the question with the code for that? like, where you initialize it and how you use it with the App? I could reproduce the error on my end when you initialize the store incorrectly but I would like to confirm. — Daniel Ormeño, Mar 09 '19 at 01:20
Everything looks good, maybe check that the path for `import { store } from ...` is correct. The only thing I can think of is that `store` might be `undefined` on `main.js` — Daniel Ormeño, Mar 09 '19 at 02:22

score 0 · Answer 1 · answered Mar 09 '19 at 09:26

Initialize plugin using Vue.use

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({

and you should not export store like this. Here is the better way

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  // your code
});

export default store;

main.js

import store from "./store";

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

Vuex getter return undefined value

1 Answers1