在 Javascript ES6 模块中访问 Vuex 操作

Question

我正在使用 NuxtJS 框架来构建一个 Vue 应用程序。我为TinyMCE 编辑器编写了一个自定义插件，用于将图像上传到服务器。这个插件是一个带有单个导出的 ES6 模块（为简洁起见，我已经删除了代码）。所以这里选择图片 -> 压缩 -> 上传到服务器。

  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 }

我在将图像上传到服务器的模块中导入 Vuex action。以下是它的代码。

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)
    })
  })
}

但是在使用这个插件的时候，axios没有被触发。显然原因是this.$axios 是undefined。因此，这似乎不是将 Vuex 操作导入 ES6 模块的正确方法。

感谢您的帮助。

编辑

目前，我正在使用 window.$nuxt.context.store .dispatch('common/post_editor/uploadToServer', imageBlob)

但不确定这是否是一个好习惯。

Answer 1

Vue 和 Nuxt 插件在组件实例上定义属性。动作中的this 不是组件实例，因此不应该有this.$axios。除了严格的 OOP 代码之外，在任何地方使用松散定义的 this 动态上下文是一种过时且有问题的做法。

你使用动作的方式不正确。应导入商店而不是操作：

import store from '.../store`.

导入 Axios 的方式不正确。它应该在非组件模块中显式导入。如果有带有拦截器等的Axios实例，可以在一个模块中维护：

import axios from '.../common/axios`.