No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Unable to save retrieved data to Vuex state.

    Help
    2
    7
    393
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      fakedrpanda last edited by

      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;
      }
      
      1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel last edited by dobbel

        My thoughts, so you:

        1. select a csv file in an upload component to be uploaded from client(quasar) to a server (http://localhost:4444/upload).

        2. 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?)

        3. 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.

        4. 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

        1. you can process csv files in client(browser).

        2. why not put this.loadRawData() in first then(‘succes’) block

        3. where is the initial CSV from s3 bucket?

        4. 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

        F 1 Reply Last reply Reply Quote 1
        • F
          fakedrpanda @dobbel last edited by 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:

          1. 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…
          2. 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
          }
          
          F 1 Reply Last reply Reply Quote 0
          • F
            fakedrpanda @fakedrpanda last edited by 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
            }
            
            
            1 Reply Last reply Reply Quote 0
            • dobbel
              dobbel last edited by 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?

              F 1 Reply Last reply Reply Quote 0
              • F
                fakedrpanda @dobbel last edited by 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?

                1 Reply Last reply Reply Quote 0
                • dobbel
                  dobbel last edited by dobbel

                  @fakedrpanda What’s the question?

                  1 Reply Last reply Reply Quote -1
                  • First post
                    Last post