Javascript Vuex getter返回未定义的值

我有我的存储，我调用了一个getter，但它返回未定义，我试图在存储中打印存储参数值，但也未定义，但是，当页面刷新时，它工作正常

这是store.js，getter称为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");

这是我的组件

<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>

名义：

现实主义者
从“vuex”导入{mapGetters}；
导出默认值{
名称：“DashboardEditCourse”，
数据：（）=>({
课程：{
id:0，
标题：“，
姓名：“
}
}),
方法：{
updateCourse（）{
this.$store.commit（“更新课程”，this.COURSE）；
}
},
计算：{
…映射器（['courseById']）
},
安装的（）{
log（this.courseById（this.route.params.id））；
this.course=this.coursebyd（this.$route.params.id）；
}
};

---

我使用了其他lifecycle钩子和nothing，在getter中我使用了filter代替find和nothing://

使用Vue初始化插件。使用

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

Vue.use(Vuex);

export const store = new Vuex.Store({

你们不应该像这样出口商店。这是更好的办法

store.js

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

Vue.use(Vuex);

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

export default store;

import store from "./store";

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

main.js

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

Vue.use(Vuex);

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

export default store;

import store from "./store";

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

---

你的

getter

看起来不错，你能展示一下你是如何初始化你的商店的吗？我感觉您的存储初始化不正确。@DanielOrmeño

export const store=new Vuex.store({

你能用这个问题的代码更新这个问题吗？比如，你在哪里初始化它，以及你如何在应用程序中使用它？当你不正确地初始化存储时，我可能会在我这方面重现错误，但我想确认一下。问题更新，@DanielOrmeñoEverything看起来不错，也许可以检查

导入{store}的路径from…

是正确的。我唯一能想到的是

store

可能是

main.js上的
undefined