Question

我试图根据（课程）商店中的内容设置数据属性（在“课堂”中）。但是我不断得到undefined。如何获取该值并将其设置为数据？

Classroom.vue：

data(){
  return {
    selectedOption: this.currentLesson
  }
}

computed: Object.assign({},
  mapGetters({
    currentLesson: "lesson/current"
  })
)

lesson.js：

const state = {
  current: {}
}

const getters = {
  current(){
    return state.current
  },
}

index.js：

export default new Vuex.Store({
  modules: {
    lesson,
    user
  }
})

Answer 1

更新：

在设置计算值之前，将调用组件的data函数。因此，您不能在data函数中使用计算属性。（这是合理的，因为某些计算的获取器可能依赖于数据的某些属性。如果我们在调用data之前设置计算值，则可能导致无限循环。）

在您的情况下，如果希望selectedOption始终与currentLesson相同，则无需将其放在组件的本地数据中，只需直接使用this.currentLesson在您的视图模板中。

但是，如果您只想基于selectedOption为lesson/current设置初始值，则可以通过以下方式显式访问它：

selectedOption: this.$store.getters['lesson/current']

或者通过使用生命周期挂钩（例如created或mounted：

created () {
    this.selectedOption = this.$store.getters['lesson/current']
    // or `this.selectedOption = this.currentLesson` if you keep that mapped getter
}

原始答案：

currentLesson: "lesson/current"是“ namespaced getter”语法。您需要为课程存储定义设置namespaced: true。导出lesson.js时是否设置了该字段？

使用Getter获取Vue本地数据

1 个答案: