Using class model in Vue.js?

Question

i'm making CRUD admin tool using Nuxt.js (Vue.js SSR framework) but when object more nested, it is difficult to handling this objects.

for example, when i have object like this

in A.vue file

data: () => ({
    page:  {
       language: "",
       background: "",
       content: { 
          title: "",
          age: {
             male: ["......."],
             female: ["...."]
          }  
       }
       ...and more complex
    }
})

i want using class model like this,

in A.vue file

data: () => ({
    page: new Page();
})

in Class files...

class Page() {
   language, background, content properties...
}
class Content() {
    title, age properties...
}
class Age() {
    male, female properties...
}

but class is not a pure object, it does not match the concept of vue.js (Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty.)

so, i used util function that get data, and returning page object with default values,

in A.vue

data: () => ({
    page: getPageObject()
})

in PageUtils.js

function getPageObejct(data) {
    return {
       ....data,
       language: 'en',
       background: '',
       content: {
           title: 'title'
           ....
       }
     }
 }

...but i don't think that best way of handle complex data

how can i using class or other mapping model for convenient using data? (default value, method..)

Use state management. You don't have to clatter all of the data in a component, rather make a store for each module in your app. I have a multiple store sample in one of my github project. You check it our here. github.com/jofftiquez/wakeupbilliejoe.com — CENT1PEDE

bbsimonbb bbsimonbb · Accepted Answer · 2018-02-22T08:08:18

Vue is not immutable. Vue components want to be stateless chatty interfaces to a store.

The page on state management is here. You can see there's a lot of openess to different approaches. But vue relies on being able to observe changes in store state.

Keeping state in Vue components will make life needlessly harder. As others have noted, Vue's event model is not sophisticated. You're fine as long as your data is used only within your component, but the lesson of history is that just about every item of app state will eventually have more than one representation on screen, and then you're in trouble.

Using class model in Vue.js?

1 Answers