آموزش Vue 3 - همه چیز درباره data

سلام دوستان ویوویی. یکی از مهم‌ترین قسمت‌های ویوو و هر برنامه‌ای قسمتی هست که اطلاعات برنامه اونجا ذخیره میشه. توی الگوی ‌MVVM به این قسمت میگن مدل. مدل جایی هست که اطلاعات برنامه مثلا لیست کاربران، لیست نظرات و ... نگهداری میشه. توی این قسمت می‌خوایم هر چی درباره data وجود داره رو بدونیم 👌

نکته: توی این آموزش منظور از نمونه همون Vue Instance یا Vue.createApp(...) هست.

 

تعریف کردن data

قسمت مدل توی فریم‌ورک ویوو، پراپرتی data هست که توی نمونه تعریف میشه:

const app = Vue.createApp({
  data() {
    return {
      theme: 'dark',
      user: {
        name: "Donald",
        email: "google@me.com",
        address: "Red door, Texas"
      },
      posts: [{ ...}, { ...}, { ...}]
    }
  }
});

همونطور که می‌بینیم data توی ویوو تابع هست که یک آبجکت رو ریترن می‌کنه. این آبجکت رو می‌تونیم از بیرون بسازیم و به ویوو پاس بدیم:

let appData = {
  theme: 'dark',
  user: {
    name: "Donald",
    email: "google@me.com",
    address: "Red door, Texas"
  },
  posts: [{ ...}, { ...}, { ...}]
}

const app = Vue.createApp({
  data: () => appData
});

به محض اینکه نمونه ساخته شد، ما با app.$data به دیتای تعریف شده دسترسی داریم:

let appData = { counter: 4 }

const app = Vue.createApp({
    data: () => appData
}).mount('#app');

console.log(app.$data.counter); // 4

 

نمایش‌ data

ما می‌تونیم به دو صورت به اعضای data دسترسی پیدا کنیم:

app.$data.theme; // dark
app.theme; // dark

که مورد دوم نسخه کوتاه شده‌ی اولی هست. البته مورد دوم برای پراپرتی‌هایی که با _ و $ شروع میشن کار نمی‌کنه. چون ممکنه با پراپرتی‌ها و عملکردهای داخلی فریم‌ورک اشتباه گرفته بشه:

const app = Vue.createApp({
    data() {
        return {
            $theme: 'dark'
        }
    }
}).mount('#app');

console.log(app.$theme); // undefined

 

اگه بخوایم داخل متدهای نمونه به دیتا دسترسی داشته باشیم کافیه از this استفاده کنیم:

const app = Vue.createApp({
  data() {
    return {
      name: "Lukas"
    }
  },
  methods: {
    getName() {
      return this.name; // Lukas
    }
  },
  mounted() {
    return this.name; // Lukas
  }
}).mount('#app');