Как получить доступ к магазину из действия в VueJS?

Question

Я использую VueJS и Vuex. У меня есть идентификатор пользователя в магазине, вот так: скриншот vuex

И я пытаюсь передать идентификатор пользователя в выборку, но vuejs возвращает ошибку

([Vue предупреждение]: Ошибка в созданном хуке: «TypeError: this. $ Store is undefined»)

import { LOAD_APPOINTMENTS } from './types'

export default {
  loadProducts ({ commit }) {
    var user = this.$store.state.user.userid
    fetch('api/appointments/' + user)
      .then((result) => {
        return result.json()
      })
      .then((appointments) => {
        commit(LOAD_APPOINTMENTS, appointments)
      })
      .catch(er => {
        console.log(er)
      })
  }
}

Answer 1

Во-первых, при ссылке на хранилище в vuex файлах:

1. context.state вместо this.$store.state.
2. context для всех this.$store. Итак, context.commit и context.dispatch.

Во-вторых, loadProducts необходимо переписать как action на документы .

Третий , loadProducts необходимо включить context в качестве параметра:

actions: {
  loadProducts (context) {
    ...
    context.commit(...)
    ...
  }
}

Как @phil упомянул в этой ветке, важно полностью просмотреть документацию, так как этот единственный ответ поможет вам способ отладки проблемы, но может появиться еще несколько проблем (например, fetch ошибок, ошибок структуры файлов, ошибок уровня компонента / приложения).