آموزش 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');

هنگام دسترسی به اعضای data توی یک متد، این نکته رو باید درنظر داشته باشیم که نباید از Arrow Function برای تعریف متد استفاده کرده باشیم. در غیر این صورت نمی‌تونیم با this به اعضای data دسترسی داشته باشیم:

const app = Vue.createApp({
  data: () => {
    return {
      message: "Hi"
    }
  },
  methods: {
    getName: () => {
      return this.message;
    }
  }
}).mount('#app');

console.log(app.getName()); // undefined

توی کد بالا this خط ۷ به آبجکت سراسری اشاره می‌کنه. (اگه با خاصیت Arrow Function ها و this آشنایی ندارین این پست و این پست رو بخونین).

برای نمایش دیتا در View کافیه از پراپرتی بین {{   }} استفاده کنیم:

<div id="app">
  <p>{{ message }}</p>
  <p>{{ file.name }}</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Paved",
        file: {
          name: 'our-document.doc'
        }
      }
    }
  }).mount('#app');
</script>

اگه با چرخه حیات (Life Cycle) یک نمونه ویوو آشنایی دارین (و اگه ندارین بعدا باهاشون آشنا می‌شیم) لازمه که بدونین ما از متد created به بعد به data دسترسی داریم. پس data توی متد beforeCreate قابل دسترسی نیست:

const app = Vue.createApp({
  data() {
    return {
      name: "Paul"
    }
  },
  beforeCreate() {
    console.log(this.name); // undefined
  },
  created() {
    console.log(this.name); // Paul
  },
  beforeMount() {
    console.log(this.name); // Paul
  },
  mounted() {
    console.log(this.name); // Paul
  },
}).mount('#app');

 خب دوستان امیدوارم از این آموزش استفاده کرده باشین. نظرات و بازخوردهاتون رو بفرستین. روز خوش. امیدوارم مثل ویوو تو اوج باشین 💪 😉