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 — jofftiquez
– jofftiquez, Commented Feb 22, 2018 at 7:05

tony19 · Accepted Answer · 2022-07-16 01:27:16Z

1

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.

edited Jul 16, 2022 at 1:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 22, 2018 at 8:08

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

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

4 Comments

highalps Over a year ago

i'm using nuxt.js, component fetching data and using it directly.. so i want to mapping model for fetched data. it not about store concept. and Immutable.js not compatible with Vue.js...? here is link about that forum.vuejs.org/t/immutable-js-with-vue/6366

highalps Over a year ago

it is better using store management like vuex if handle common data for components.. but when fetching data from server and using it directly, store is not necessarily needed.

highalps Over a year ago

i'm focus on using fetched data directly in component using mapping model (just like es6 class)...

bbsimonbb Over a year ago

Yep. I suspect this is a recipe for making 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.

Collectives™ on Stack Overflow

Using class model in Vue.js?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related