WaitFor is broken

[yoyoys]

I can't use waitfor helper for any situation. Here is how I install the VueWait instance.

I think i need a waitFor method from wait instance, but it had nothing.

import VueWait from 'vue-wait';

...
new Vue({
....
 wait: new VueWait({ useVuex: true })
})

[fraparisi]

Did you forget Vue.use(VueWait);?

[yoyoys]

Actually I'm not forget to use, I think the major reason Is the waitFor api cannot find my instance at Vue.

[josemotanet]

I just integrated vue-wait with my own app and I'm noticing this as well. It seems as though as this relates to something that's not really the component instance.

Here's my sample. I've got a component with a method function:

export default {
  // ...
  methods: {
    init: waitFor('initializing', async () => {
      await this.$store.dispatch('projects/projects/init');
    }),
  }
}

Inside the async function, logging this shows an object with a single a object within. It does appear to be the component; however, this.a.$store returns undefined:

{
  "a": {
    "name": "Projects",
    "mixins": [
      {
        "directives": {
          "onClickaway": {}
        }
      },
      {
        "props": {
          "feature": {
            "default": null
          }
        }
      }
    ],
    "components": {
      "ProjectsNav": {
        "name": "ProjectsNav",
        "props": {
          "currentView": {}
        },
        "staticRenderFns": [
          null
        ],
        "_compiled": true,
        "__file": "src/components/projects/Nav.vue",
        "beforeCreate": [
          null
        ],
        "beforeDestroy": [
          null
        ],
        "_Ctor": {}
      },
      "ProjectCard": {
        "props": [
          "project"
        ],
        "mixins": [
          {
            "computed": {},
            "methods": {}
          }
        ],
        "components": {
          "UserTag": {
            "name": "UserTag",
            "props": {
              "isCreator": {
                "default": false
              }
            },
            "components": {
              "UserTagImage": {
                "name": "UserTagImage",
                "props": {
                  "image": {},
                  "isCreator": {
                    "default": false
                  }
                },
                "methods": {},
                "staticRenderFns": [],
                "_compiled": true,
                "__file": "src/components/UserTagImage.vue",
                "beforeCreate": [
                  null
                ],
                "beforeDestroy": [
                  null
                ]
              }
            },
            "methods": {},
            "staticRenderFns": [],
            "_compiled": true,
            "__file": "src/components/UserTag.vue",
            "beforeCreate": [
              null
            ],
            "beforeDestroy": [
              null
            ]
          }
        },
        "methods": {},
        "staticRenderFns": [],
        "_compiled": true,
        "__file": "src/components/projects/Card.vue",
        "beforeCreate": [
          null
        ],
        "beforeDestroy": [
          null
        ]
      },
      "MembersDialog": {
        "name": "MembersDialog",
        "mixins": [
          {
            "computed": {}
          }
        ],
        "components": {
          "MembersInputTag": {
            "name": "MembersInputTag",
            "components": {
              "VueTagsInput": {
                "name": "VueTagsInput",
                "components": {
                  "TagInput": {
                    "name": "TagInput",
                    "props": [
                      "scope"
                    ],
                    "staticRenderFns": [],
                    "_compiled": true,
                    "_scopeId": "data-v-5d05513b",
                    "beforeCreate": [
                      null
                    ]
                  }
                },
                "props": {
                  "value": {
                    "default": "",
                    "required": true
                  },
                  "tags": {},
                  "autocompleteItems": {},
                  "allowEditTags": {
                    "default": false
                  },
                  "autocompleteFilterDuplicates": {
                    "default": true
                  },
                  "addOnlyFromAutocomplete": {
                    "default": false
                  },
                  "autocompleteMinLength": {
                    "default": 1
                  },
                  "autocompleteAlwaysOpen": {
                    "default": false
                  },
                  "disabled": {
                    "default": false
                  },
                  "placeholder": {
                    "default": "Add Tag"
                  },
                  "addOnKey": {},
                  "saveOnKey": {},
                  "maxTags": {},
                  "maxlength": {},
                  "validation": {},
                  "separators": {},
                  "avoidAddingDuplicates": {
                    "default": true
                  },
                  "addOnBlur": {
                    "default": true
                  },
                  "isDuplicate": {
                    "default": null
                  },
                  "addFromPaste": {
                    "default": true
                  },
                  "deleteOnBackslash": {
                    "default": true
                  }
                },
                "computed": {},
                "methods": {},
                "watch": {
                  "tags": {
                    "deep": true,
                    "user": true
                  },
                  "autocompleteOpen": "selectDefaultItem"
                },
                "staticRenderFns": [],
                "_compiled": true,
                "_scopeId": "data-v-08ed9d46",
                "beforeCreate": [
                  null
                ],
                "_Ctor": {}
              },
              "UserTagImage": {
                "name": "UserTagImage",
                "props": {
                  "image": {},
                  "isCreator": {
                    "default": false
                  }
                },
                "methods": {},
                "staticRenderFns": [],
                "_compiled": true,
                "__file": "src/components/UserTagImage.vue",
                "beforeCreate": [
                  null
                ],
                "beforeDestroy": [
                  null
                ]
              }
            },
            "props": {
              "creatorId": {
                "required": true
              },
              "initUsers": {}
            },
            "methods": {},
            "computed": {},
            "watch": {},
            "staticRenderFns": [],
            "_compiled": true,
            "__file": "src/components/MembersInputTag.vue",
            "beforeCreate": [
              null
            ],
            "beforeDestroy": [
              null
            ],
            "_Ctor": {}
          }
        },
        "methods": {},
        "staticRenderFns": [],
        "_compiled": true,
        "__file": "src/components/projects/MembersDialog.vue",
        "beforeCreate": [
          null
        ],
        "beforeDestroy": [
          null
        ],
        "_Ctor": {}
      },
      "ArchivedDrawer": {
        "name": "ArchivedDrawer",
        "components": {
          "ProjectCard": {
            "props": [
              "project"
            ],
            "mixins": [
              {
                "computed": {},
                "methods": {}
              }
            ],
            "components": {
              "UserTag": {
                "name": "UserTag",
                "props": {
                  "isCreator": {
                    "default": false
                  }
                },
                "components": {
                  "UserTagImage": {
                    "name": "UserTagImage",
                    "props": {
                      "image": {},
                      "isCreator": {
                        "default": false
                      }
                    },
                    "methods": {},
                    "staticRenderFns": [],
                    "_compiled": true,
                    "__file": "src/components/UserTagImage.vue",
                    "beforeCreate": [
                      null
                    ],
                    "beforeDestroy": [
                      null
                    ]
                  }
                },
                "methods": {},
                "staticRenderFns": [],
                "_compiled": true,
                "__file": "src/components/UserTag.vue",
                "beforeCreate": [
                  null
                ],
                "beforeDestroy": [
                  null
                ]
              }
            },
            "methods": {},
            "staticRenderFns": [],
            "_compiled": true,
            "__file": "src/components/projects/Card.vue",
            "beforeCreate": [
              null
            ],
            "beforeDestroy": [
              null
            ]
          }
        },
        "props": {},
        "staticRenderFns": [],
        "_compiled": true,
        "__file": "src/components/projects/ArchivedDrawer.vue",
        "beforeCreate": [
          null
        ],
        "beforeDestroy": [
          null
        ]
      }
    },
    "computed": {},
    "methods": {},
    "staticRenderFns": [],
    "_compiled": true,
    "__file": "src/views/projects/index.vue",
    "beforeCreate": [
      null
    ],
    "beforeDestroy": [
      null
    ],
    "_Ctor": {}
  }
}

[Kolobok12309]

Try use

export default {
  // ...
  methods: {
    init: waitFor('initializing', async function() {
      await this.$store.dispatch('projects/projects/init');
    }),
  }
}