Unable to save retrieved data to Vuex state.

fakedrpanda

After retrieving a CSV from a s3 bucket I want to save that data into a Vuex store state. So, I can then load the data using a q-table. I keep getting this error and don’t know how to resolve it. Thank you for the help!

[vuex] unknown mutation type: rawdata/loadData

Quasar component:

<template>
    <div class="q-pa-md">
       <q-uploader
        style="max-width: 100%"
        url="http://localhost:4444/upload"
        label="Import Order List"
        multiple
        ref="file"
        accept=".csv, csv/*"
        @rejected="onRejected"
        @added ="selectFile"
        @uploaded="sendFile" 
        @finish="getRawData"
      />
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'ImportButton',
        data(){
            return {
                file: '',
                rawdata: []
            }
        },
        methods: {
            selectFile(){
                this.file = this.$refs.file.files[0];
            },
            sendFile(){
                const formData = new FormData();
                formData.append('file', this.file);
            },
            getRawData(){
                axios.get('PORTNAME')
                .then((response) => {
                    this.rawdata = response.data;
                })
                .catch((error)=> {
                    console.log(error);
                })
                .then(() =>{
                    //always executed
                });
                this.loadRawData()
            },
            onRejected (rejectedEntries) {
                this.$q.notify({
                    type: 'negative',
                    message: `${rejectedEntries.length} file(s) did not pass validation constraints`
                })
            },
            loadRawData(){
                this.$store.commit('rawdata/loadData', this.rawdata)
            }
        },
    }
</script>

Vuex store:

rawdata/state.js

export default function () {
    return {
      data : []
    }
}

rawdata/mutations.js

export const loadData = (state, data) => {
    console.log(data)
    state.data = data;
}

dobbel

My thoughts, so you:

select a csv file in an upload component to be uploaded from client(quasar) to a server (http://localhost:4444/upload).
then ‘on uploaded’ event of the upload component, you call ‘sendFile’.
What does that do? You want to upload the same file to a server again?
( btw I don’t see how you actually send data with it. ( formData.append sends data?)
then ‘on finish’ of the upload component, you make a call to a server(what server?) with axios to retrieve the same data. The same data you just send.
the same data is then back to the client and stored in vuex. to be displayed in a table.

I think there’s a lot of things ‘not optimal’ with this approach…

btw

you can process csv files in client(browser).
why not put this.loadRawData() in first then(‘succes’) block
where is the initial CSV from s3 bucket?
what is ‘sendFile’ supposed to do?

as for the error: you are using vuex modules so what does your index.js look like in the store folder?

https://quasar.dev/quasar-cli/vuex-store

fakedrpanda

Hey @dobbel ,
1)Yes, the upload components uploads to the localhost:4444/upload server
2)I was confused on how the q-upload was working/uploading it to the server, but I think that once the upload button is clicked. It automatically uploads, thus not actually needing the sendFile() method,
3.)Yes, I was to retrieve the same data I just send. My goal is to save the csv file in an s3 and then load it in a table so I then can make a modified copy of it. (I still want to save an original copy)
4)yup.

For the other points:

By process, do you mean read and load the csv in the browser without seeing it to a sever? If so, will that be done with an axios?
2.I didn’t put it because it wasn’t finding it for some reason. But now that i moved it, is working…
The original csv is uploaded by the user, then saved to an s3.
4.I thought you needed to run the @upload method for the q-upload component. it works fine without it.

Here is my store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import rawData from './rawdata'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      rawData
    },

    strict: process.env.DEV
  })

  if (process.env.DEV && module.hot) {
    module.hot.accept(['./rawdata'], () => {
      const newrawdata = require('./rawdata').default
      Store.hotUpdate({ modules: { rawData: newrawdata } })
    })
  }

  return Store
}

fakedrpanda

@fakedrpanda

changing ‘rawData’ to ‘rawdata’ in index made the it work

import rawdata from './rawdata'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      rawdata
    },

    strict: process.env.DEV
  })

  if (process.env.DEV && module.hot) {
    module.hot.accept(['./rawdata'], () => {
      const newrawdata = require('./rawdata').default
      Store.hotUpdate({ modules: { rawData: newrawdata } })
    })
  }

  return Store
}

dobbel

@fakedrpanda

By process, do you mean read and load the csv in the browser without seeing it to a sever? If so, will that be done with an axios?

yes you can read and load a csv in the browser without any server processing. just google for npm packages like https://www.npmjs.com/package/csvtojson.

So you have it all working now?

fakedrpanda

@dobbel Yes everything is working good, thank you.
Just one last question. Right now I’m uploading the csv file to a s3 bucket and then right away calling that s3 object with axios. On my backend, I have csvtojson which returns that data.

    export default {
        name: 'ImportButton',
        data(){
            return {
                rawdata: []
            }
        },
        methods: {
            getRawData(){
                axios.get('http://localhost:4444/s3CSV')
                .then((response) => {
                    this.rawdata = response.data; 
                    this.loadRawData();
                })
                .catch((error)=> {
                    console.log(error);
                });
            },
            loadRawData(){
                this.$store.commit('rawdata/loadData', this.rawdata)
            }

I want to next, modify the json, and make a db out of it. (either SQL or NoSQL, haven’t decided).

Will it be better to load the csv in the browser instead of making the axios call. (I still want to save the original copy to an s3)

Also any reference on using npm packages with quasar. will ‘npm i --save csvtojson’ just work?

dobbel

@fakedrpanda What’s the question?