Vue js external data object

Question

I'm just starting out and have gone through the Vue guide. I've got some basic grasp on imports and exports of ES6 but wanted to know the ideal way of doing this.

I'll have several components that need an original single source of data that i'll need to individually manipulate from there. Ideally I want that data to be in a separate file so that others can manipulate it.

I can figure out to do this via jquery ( seen below ) but I don't really need to make a call as the json file will be internal:

module.exports = {
data: function () {
    return {
        msg: 'hello',
        whatever : 'hi'
    }
},
created : function() {
    this.fetchData();
},
methods : {
    fetchData : function() {
        console.log("WORKING");
        var self = this;
        $.get( apiURL, function( data ) {
                self.items = data;
                console.log(data);
        });
    }
}

}

But I also don't want to have all the data be in the App.vue file. I need it somewhere else and then need it to replace my data.

Is the best way to do this to create another Vue file with no template or styling and just create it's own module.exports data object? Say mydata.vue:

module.exports = {
data: function () {
    _mydata = {
        items : [
            {case:'caseone'},
            {case:'casetwo'}
        ],
        otheritems : [
            {case:'caseone'},
            {case:'casetwo'}
        ]
    }
}

}

And then somehow replacing this data object in mydata.vue with the data object in app.vue with imports ( main. js ) ?

import Vue from 'vue'
import App from './App.vue'
import Data from './SiteData.vue'

Just wanted to check if this was the ideal way/i'm on the right path...or if there is an easier way to have a central data object in a different file for all my components?

vuejs.org/guide/application.html#State-Management

Celeo
– Celeo

2016-07-08 16:57:16 +00:00
Commented Jul 8, 2016 at 16:57 — Celeo
– Celeo, Commented Jul 8, 2016 at 16:57

Yerko Palma · Accepted Answer · 2016-07-07 19:32:19Z

6

What I have done is to manage my data in a json file. I think that the approach of use separate files for initial data is cool for small apps. Bigger apps need something more usefull like Vuex.

I don't think it is a good idea to manage a .vue file, as those files are meant to be handled by some module budled system, with the correspondind vue transformation, not the case of the data object.

My approach was this: I had a data.json file

data.json

{
  "component1": {
    "someData": "someValue",
    ...
  }, 
  ...
  "componentN": {
    "someOtherData": "someOtherValue"
  }
}

And then I import that data in the corresponding component

componentN.vue

<template>
</template>
<script>
import { componentN } from './data.json'

export default {
  data () {
    return componentN
  }
}
</script>

Note that:

I used a single file for manage data, however you can split it in a file for every component, for example.
As you can see, this approach can become a mess with medium apps, I don't want to even imagin it in big apps, so be careful.

answered Jul 7, 2016 at 19:32

Yerko Palma

12.4k5 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philipp Mochine Over a year ago

Unfortunately this gives the error now with Webpack 5.

Should not import the named export 'componentN' (imported as 'componentN') from default-exporting module (only default export is available soon)

Collectives™ on Stack Overflow

Vue js external data object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related