0

Im using VueJS and Vuex. I have the userid into the store, this way: vuex screenshot

And i try pass the userid to a fetch, but vuejs return error

([Vue warn]: Error in created hook: "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)
      })
  }
}
feli
  • 11
  • 3
  • How/where do you call `loadProducts` and also what is the file location of the script that you have provided? Is it some kind of `.js` file which just exports that function? – Jakub A Suplicki Jun 18 '20 at 23:15
  • the script that i have provided is action.js and i call loadProducts in App.Vue. This way: – feli Jun 18 '20 at 23:25
  • Is this action part of the `user` module or the store root? – Phil Jun 18 '20 at 23:25
  • @Phil No, i have two store modules (user and products) the module user load the userid and username into vuex store, products fetch from api and load the products for that user in vuex store – feli Jun 18 '20 at 23:35
  • So which module is this action in? – Phil Jun 18 '20 at 23:36
  • I believe you are looking for something similar to this: https://stackoverflow.com/questions/41534412/how-to-get-vuex-state-from-a-javascript-file-instead-of-a-vue-component – Jakub A Suplicki Jun 18 '20 at 23:47

1 Answers1

2

First, when referencing the store within vuex files:

  1. context.state instead of this.$store.state.
  2. context for all of the this.$store. So, context.commit and context.dispatch.

Second, the loadProducts needs to be rewritten as an action per docs.

Third, loadProducts needs to incorporate the context as a parameter:

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

As @phil has mentioned in this thread, it is important to view the documentation entirely, as this single answer will get you on the way to debugging the problem, but there might be multiple more problems showing up (e.g. fetch errors, file structure errors, component/App level errors).

T.Woody
  • 1,142
  • 2
  • 11
  • 25
  • I enjoy feedback. If this question was helpful or solved the problem, please upvote and/or accept :) – T.Woody Jun 18 '20 at 23:01
  • Thanks! but it does not work. Now Vuejs return context is not defined :(, sorry is my first vuejs app – feli Jun 18 '20 at 23:28
  • 1
    @feli I recommend you read the documentation carefully ~ https://vuex.vuejs.org/guide/actions.html#actions – Phil Jun 18 '20 at 23:32
  • 1
    FYI, it should be `loadProducts ({ commit, state })` or just `loadProducts (context)` – Phil Jun 19 '20 at 00:04
  • Actions are passed the `context` as their first arg. This `context` has properties `state` and `getters` as well as functions `commit` and `dispatch`. It is commonly destructured using `({ state, getters, commit, dispatch })`, picking only the properties required – Phil Jun 19 '20 at 00:24
  • @Phil thanks, I got it now. I messed up my keywords in my brain's RAM, and was thinking `commit` was something OP had declared seeing it defined that way. – T.Woody Jun 19 '20 at 00:26
  • To explain your question about OP's code, I suspect they have something like `import actions from 'path/to/that/file.js'` and then `new Vuex.Store({ state, getters, mutations, actions })` – Phil Jun 19 '20 at 00:30