Estoy usando el marco NuxtJS para construir una aplicación Vue. Estoy escribiendo un complemento personalizado para el editor TinyMCE para cargar imágenes en el servidor. Este complemento es un módulo ES6 con una sola exportación ( he sacado el código por brevedad ). Entonces aquí, la imagen está seleccionada -> comprimida -> cargar al servidor.
import { actions } from '@/store/common/post_editor.js' const imageUpload = function (editor) { function _onAction() { let imageBlob = null onChange: function (api, details) { //get the image selected compressImage(image).then((output) => { imageBlob = output }) } }, onSubmit: function (api) { actions .uploadToServer(imageBlob) .then((url) => { editor.insertContent('<p><img src="' + url + '"/></p>') }) .catch((error) => { }) }, }) } } export { imageUpload } Estoy importando la action de Vuex en el módulo que sube la imagen al servidor. Y el siguiente es el código para ello.
uploadToServer(vuexContext, blob) { return new Promise((resolve, reject) => { let formData = new FormData() formData.append('file', blob) console.log(this.$axios) // this is undefined this.$axios .$post('/server/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }) .then((res) => { resolve(res.location) }) .catch((error) => { reject(error) }) }) } Pero al usar este complemento, axios no se activa. Y aparentemente la razón es this.$axios no está definido . Entonces, parece que esta no es la forma correcta de importar la acción de Vuex en un módulo ES6.
Cualquier ayuda es apreciada, gracias.
EDITAR
Por ahora, estoy usando window.$nuxt.context.store .dispatch('common/post_editor/uploadToServer', imageBlob)
Pero no estoy seguro si esto es una buena práctica.
Los complementos de Vue y Nuxt definen propiedades en instancias de componentes. this dentro de una acción no es una instancia de componente y, por lo tanto, no se supone que tenga this.$axios . Es una práctica desactualizada y cuestionable usar this contexto dinámico vagamente definido en cualquier lugar además del estricto código OOP.
Es una forma incorrecta de usar una acción. Se debe importar una tienda en lugar de una acción:
import store from '.../store`.Es una forma incorrecta de importar Axios. Debe importarse explícitamente en módulos que no sean componentes. En caso de que haya una instancia de Axios con interceptores, etc., se puede mantener dentro de un módulo:
import axios from '.../common/axios`.