I want to preface this by saying this is my first large VueJS application and my first foray into the world of SPAs and APIs.
I have been unable to use vue-snotify from the context of vuex (and others). The code base is quite large so I have chopped it up a bit to show the important parts.
snotify.js
This is imported into the main.js file.
import Vue from 'vue'
import Snotify from 'vue-snotify'
Vue.use(Snotify, {
toast: {
timeout: 10000
}
})
const wSnotify = require('vue-snotify')
window.snotify = wSnotify
// window.snotify = require('vue-snotify')Registration component
When the user completes the registration form and clicks "Register", this method is run
register (user) {
this.$store.dispatch('auth/register', user)
}Which calls this vuex action...
Vuex Auth Actions
import Vue from 'vue'
import Proxy from '@/proxies/AuthProxy'
import Transformer from '@/transformers/AccountTransformer'
import store from '@/store'
import * as types from './mutation-types'
export const register = ({ commit, dispatch }, payload) => {
console.log('store.auth.register')
let registration = Transformer.register(payload)
new Proxy().register(registration).then((response) => {
console.log('store.auth.register response', response)
commit(types.LOGIN, response.token)
dispatch('account/save', response.account, { root: true })
Vue.router.push({ name: 'dashboard' })
}).catch((error) => {
console.log('store.auth.register error', error)
Vue.$snotify.error('The Access Code your entered was not found.', 'Invalid Access Code') // Error here
})
}Proxy is a class with various methods that use Promises to talk to the API via Axios
AuthProxy.js
import Proxy from './Proxy'
class AuthProxy extends Proxy {
/**
* AuthProxy constructor
*
* @param {Object} parameters The query paramets
**/
constructor (parameters = {}) {
super('auth', parameters)
}
/**
* Register a new user
*
* @param {Object} data The registration data
*
* @return {Promise} The result in a Promise
**/
register (data) {
// return this.submit('post', `/${this.endpoint}/register`, data) // Default
return this.sSubmit('post', `/${this.endpoint}/register`, data) // Snotify
}
sSubmit (requestType, url, data = null) {
return Vue.$snotify.async('Called with Promise', 'Test async', () => new Promise((resolve, reject) => { // Error here
Vue.$http[requestType](url + this.getParameterString(), data).then((success) => {
resolve({
title: 'Registration Successful',
body: 'You will be automatically logged in'
})
return success.json()
}).then((success) =>{
console.log(success)
return true
}).catch((error) => {
console.log(error.bodyText)
reject({
title: 'Error!',
body: 'Registration failed.'
})
})
}))
}
}sSubmit is a new method I built based on the examples in the Documentation and Issue #25. Below is the default submit method.
Proxy.js
import Vue from 'vue'
class BaseProxy {
/**
* BaseProxy constructor
*
* @param {string} endpoint The endpoint being used
* @param {Object} parameters The parameters for the request
**/
constructor (endpoint, parameters = {}) {
this.endpoint = endpoint
this.parameters = parameters
}
/**
* Transform parameters object to a string
*
* @return {string} The parameter string
**/
getParameterString () {
const keys = Object.keys(this.parameters)
const parameterStrings = keys.filter(key => !!this.parameters[key]).map(key => `${key}=${this.parameters[key]}`)
return parameterStrings.length === 0 ? '' : `?${parameterStrings.join('&')}`
}
/**
* Perform an AJAX request
*
* @param {string} requestType The request type
* @param {string} url The URL for the request
* @param {Object|null} data The data to be sent with the request
*
* @return {Promise} The result in a promise
**/
submit (requestType, url, data = null) {
return new Promise((resolve, reject) => {
Vue.$http[requestType](url + this.getParameterString(), data).then((response) => {
resolve(response.data)
}).catch(({ response }) => {
if (response.data) {
reject(response.data)
} else {
reject(response)
}
})
})
}
}The lines Vue.$snotify.error (in Vuex Actions) and Vue.$snotify.async (AuthProxy.js) produce similar errors: Uncaught (in promise) TypeError: Cannot read property '[error|async]' of undefined. I have no problem using .$snotify from within the main Vue instance, but it doesn't work when outside of that context. I have also tried adding it to the window object as you can see in the snotify.js above.
but so far none of this has worked.
How can I get access to $snotify from within the vuex (or Proxy) context? Or am I simply doing something wrong?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent