在 Vue.js 中使用 class 模型？

Question

我正在使用 Nuxt.js（Vue.js SSR 框架）制作 CRUD 管理工具但是当对象嵌套较多时，很难处理这个对象。

例如，当我有这样的对象时

在 A.vue 文件中

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

我想使用这样的 class 模型，

在 A.vue 文件中

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

在 Class 个文件中...

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

但是class不是纯对象，不符合vue.js的概念（Vue 将遍历其所有属性并使用 Object.defineProperty 将它们转换为 getter/setters。）

所以，我使用了获取数据并返回页面对象的 util 函数使用默认值，

在A.vue

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

在PageUtils.js

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

...但我认为这不是处理复杂数据的最佳方式

如何使用 class 或其他映射模型为了方便使用数据？（默认值，方法..）

Answer 1

Vue 不是不可变的。 Vue 组件希望成为无状态的聊天 interfaces to a store。

状态管理页面is here。你可以看到对不同的方法有很多开放性。但是vue依赖于能够观察store state的变化。

在 Vue 组件中保持状态会让生活变得不必要地困难。正如其他人所指出的，Vue 的事件模型并不复杂。只要您的数据仅在您的组件中使用就没问题，但历史的教训是应用程序状态的几乎每一项屏幕上最终会有不止一种表示，然后你就有麻烦了。

在 Vue.js 中使用 class 模型？

Using class model in Vue.js?

vue.js

nuxt.js