如何通过 VueJS 中的操作访问商店？

Question

我正在使用 VueJS 和 Vuex。我通过这种方式将用户 ID 放入商店： vuex screenshot

我尝试将用户 ID 传递给 fetch，但 vuejs 返回错误

([Vue warn]: Error in created hook: "TypeError: this.$store is 未定义")

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 per docs。

第三，loadProducts 需要将context 合并为参数：

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

正如@phil 在此线程中提到的，完整查看文档很重要，因为这个单一的答案将帮助您调试问题，但可能会出现更多问题（例如fetch错误、文件结构错误、组件/应用级别错误）。