توجه داشته باشید که در Vue.js 3 با استفاده از Vite، وقتی مقادیری را از یک store (مانند Vuex یا Pinia) دریافت می‌کنید، به طور کلی این مقادیر به روش ByRef (با ارجاع) دریافت می‌شوند. این بدان معناست که اگر مقدار دریافتی یک شیء یا آرایه باشد، تغییرات انجام شده بر روی این مقادیر در کامپوننت، به طور مستقیم بر روی مقدار اصلی در store تاثیر می‌گذارد.

برای مثال، اگر از Vuex استفاده می‌کنید و یک شیء را از store دریافت می‌کنید:

// در فایل store.js
const store = new Vuex.Store({
  state: {
    user: {
      name: 'John',
      age: 30
    }
  },
  getters: {
    getUser: state => state.user
  }
});

export default store;

و در یک کامپوننت Vue:

<template>
  <div>
    {{ user.name }} - {{ user.age }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getUser']),
    user() {
      return this.getUser;
    }
  }
};
</script>

در اینجا، user که از store دریافت شده است، به روش ByRef دریافت می‌شود. بنابراین اگر شما تغییراتی در user در کامپوننت انجام دهید، این تغییرات مستقیماً در store نیز منعکس می‌شود.

اگر بخواهید مقادیر را به روش ByVal (به‌صورت کپی) دریافت کنید تا تغییرات در کامپوننت تاثیری بر مقدار اصلی در store نداشته باشد، می‌توانید از توابعی مثل JSON.parse(JSON.stringify()) یا استفاده از lodash برای ایجاد یک کپی عمیق استفاده کنید:

user() {
  return JSON.parse(JSON.stringify(this.getUser));
}

یا با استفاده از lodash:

import _ from 'lodash';

user() {
  return _.cloneDeep(this.getUser);
}

این روش‌ها تضمین می‌کنند که مقادیر به‌صورت کپی دریافت می‌شوند و تغییرات در کامپوننت تاثیری بر مقادیر اصلی در store نخواهد داشت.

البته من از روش کپی مستقیم بسیار استفاده می کنم . این روش وقتی از یک store فرم های متعدد استفاده می کنند و مایلید تغییرات در یکی از فرم ها در اطلاعات سایر فرم ها نیز اثر بگذارد بسیار کاربردی است .

به عنوان مثال : فرم شرح حساب ها باز است و همزمان در فرم ثبت سند جدید ، شرح جدیدی درج می گردد . در این لحظه اگر به فرم شرح حساب ها نگاه کنید ، شرح جدید به لیست اضافه شده است بدون اینکه نیاز باشد اطلاعات را مجدد از سرور بارگیری نمایید .

مثال دیگر : سبد خرید در یک سایت فروشگاهی است . وقتی سبد خرید در یک تب باز است و از تب دیگر به سبد خرید کالایی اضافه و یا از آن حذف می شود ، اثر این کار را در تب سبد خرید می توانید مشاهده کنید . ( یکی از قابلیت های بسیار جذاب vue خصوصیت اینتراکتیو بدون آن است به معنی اینکه به محض تغییر در داده ها ، DOM به صورت خودکار بروزرسانی شده و تغییرات در مرورگر کاربر قابل مشاهده است )

منبع : Microsoft Copilot

متن سوال :

• در محیط vue.js 3 vite وقتی از یک store مقداری رو دریافت می کنم آیا به روش BayRef مقدار ارسال می شود یا ByVal ؟