Vuex getter 返回未定义的值

Question

我有我的商店，我调用了一个 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>

我使用了其他生命周期钩子但什么都没有，在 getter 中我使用过滤器而不是 find 并且什么都没有：/

Answer 1

使用Vue.use初始化插件

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;

ma​​in.js

import store from "./store";

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