javascript - Nuxt, How to handle third party self-updating object/library in vuex without mutation errors?

Question

For reference: this only happens in nuxt, but in Vue it fine

For a project I’m working on, I use tus 1 to upload heavy files to the server via the tus-js-client.

Everything works fine on the component but I now want to be able to keep tracks of uploading file status from all the app, and for this, to use vuex. So far, I have put the uploading files in the store but as long as I start the upload via tus client from the store, I get the Error: [vuex] do not mutate vuex store state outside mutation handlers. traditional vue error as the tusUpload object is updating itself via ajax.

Here is an example of the code generally used to start an upload wih tus:

// Create a new tus upload
    var upload = new tus.Upload(file, {
        endpoint: "http://localhost:1080/files/",
        retryDelays: [0, 3000, 5000, 10000, 20000],
        metadata: {
            filename: file.name,
            filetype: file.type
        },
        onError: function(error) {
            console.log("Failed because: " + error)
        },
        onProgress: function(bytesUploaded, bytesTotal) {
            var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
            console.log(bytesUploaded, bytesTotal, percentage + "%")
        },
        onSuccess: function() {
            console.log("Download %s from %s", upload.file.name, upload.url)
        }
    })

    // Start the upload
    upload.start(); // <-- This is where the mutation errors start

in Tus/setup.js

import * as tus from 'tus-js-client'
import tusConfig from './Config'
import tusMethods from './Methods'
import { isEmpty } from 'lodash'

export default {
   start(file) {
      this.create(file).start()
   },
   create(file, metadata = {}) {
      return new tus.Upload(file, {
         ...tusConfig(file, metadata),
         ...tusMethods(file),
      })
   },
   uploadFiles(files, metadata) {
      isEmpty(files)
         ? null
         : files.forEach((file) => {
              const obj = this.create(file, metadata)
              obj.start() // Start upload
           })
   },
}

For reference: this only happens in nuxt, but in Vue it fine

in vuex

export const state = () => ({
   allFiles: [],
   onProcess: 0,
})
export const mutations = {
// Set tus object in file
   setTusObject(state, payload) {
      state.allFiles.forEach((file, index) => {
         if (payload.file === file.file) {
            state.allFiles[index].obj = payload.obj // focus on this line, this is the issue
         }
      })
       // that obj has a method called abort() to pause the upload
       state.allFiles[payload].obj.abort() // Pause the specific file
   },
}

now everything looks good, but payload.obj is causing that issue

but if did { ...payload.obj }, we won't have any errors, great

buuuut! if we did state.allFiles[payload].obj.abort(), the error will be state.allFiles[payload].obj.abort not a function

it like we converting that Object and delete the methods inside it (.abort())

For reference: this only happens in nuxt, but in Vue it fine

question from:https://stackoverflow.com/questions/65838779/nuxt-how-to-handle-third-party-self-updating-object-library-in-vuex-without-mut

Answer 1

Waitting for answers