از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای Vuex – مدیریت متمرکز ایالت برای برنامه های VueVuex کتابخانه ای است که داده ها را در یک فروشگاه Vuex ذخیره می کند، که به عنوان منبع داده عمل می کند. روی در یک برنامه Vue بیان می کند. این فروشگاه حاوی یک حالت جهانی (مجموعه ای از ویژگی ها) و توابع (گیرنده ها، اقدامات و جهش ها) است که برای خواندن و تغییر وضعیت استفاده می شود. سناریویی را در نظر بگیرید …
سرفصلهای مطلب
معرفی
Vuex یک کتابخانه است که مغازه ها داده ها در a فروشگاه Vuex، که به عنوان منبع داده عمل می کند روی در یک برنامه Vue بیان می کند. این فروشگاه حاوی یک دولت جهانی (مجموعه خواص) و کارکرد (گیرندگان، اقدامات و جهش ها) برای خواندن و تغییر حالت استفاده می شود.
سناریویی را در نظر بگیرید که در آن می خواهید یک برنامه ساده Vue ایجاد کنید که به شما امکان می دهد مقداری را از یک متغیر اضافه یا حذف کنید. count، مانند تصویر زیر:
طبیعی process این خواهد بود که – ابتدا تابعی را تعریف کنیم که ما را برمی گرداند count متغیر:
data() {
return {
count: 0
}
}
و سپس یک تابع افزایشی و کاهشی تعریف کنیم تا بتوانیم آن را دستکاری کنیم count:
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
در حالی که هیچ مشکلی در این الگو وجود ندارد (حداقل در برنامه های کاربردی ساده)، زمانی که سعی می کنید داده ها را به صورت واکنشی بین اجزای مختلف به اشتراک بگذارید، مشکلی پیش می آید.
می توانید انتخاب کنید که از کامپوننت استفاده کنید props، اما با در نظر گرفتن یک مورد واقع بینانه کار با 50-100 (یا بیشتر) جزء، استفاده از لوازم جانبی نسبتاً سریع خسته کننده خواهد شد.
به اشتراک گذاری داده ها بین مؤلفه ها هنگام توسعه برنامه های کاربردی در مقیاس بزرگ، به عنوان مثال، برنامه هایی با ده ها مؤلفه، پیچیده تر می شود. به همین دلیل است که راه حل هایی مانند Vuex ایجاد شد – تا مدیریت دولتی دردناک تر شود.
در این راهنما، همه چیزهایی را که برای شروع کار با کتابخانه مدیریت دولتی رسمی Vue.js نیاز دارید، مرور خواهیم کرد. Vuex.
شروع کار با Vuex
Vuex از پروژه هایی مانند فیس بوک الهام گرفته شده است شار و کتابخانه مدیریت دولتی React، Redux، ذخیره و تبادل داده های واکنشی در برنامه Vue را تا حد امکان ساده کنید و در عین حال از عملکرد و قابلیت نگهداری اطمینان حاصل کنید.
این کار با داشتن یک انجام می شود فروشگاه متمرکز که داده‌ها را از آن می‌گیرید و داده‌ها را در آن می‌نویسید. هیچ راه دیگری برای به دست آوردن یا تغییر آن وجود ندارد – آن را در بسیاری از مؤلفه ها سازگار و پایدار می کند. این بی ثباتی را که اغلب در هنگام صحبت چندین مؤلفه واکنشی با یکدیگر ایجاد می شود، از بین می برد.
طبق مستندات آن:
“Vuex یک الگوی مدیریت وضعیت + کتابخانه برای برنامه های Vue.js است. به عنوان یک فروشگاه متمرکز برای تمام اجزای یک برنامه کاربردی عمل می کند، با قوانینی که تضمین می کند که حالت فقط به شکل قابل پیش بینی قابل تغییر است.”
این امر از طریق سه نوع روش، عملیاتی به دست می آید روی حالت ثبت شده دریافت‌کننده‌ها برای دریافت داده‌ها از فروشگاه، اکشن‌ها برای واکشی ناهمزمان داده‌ها استفاده می‌شوند، process آن و فراخوانی جهش، و جهش برای تغییر داده های منبع در فروشگاه استفاده می شود. به یک معنا، می توانید چرخه ای از موارد زیر را تصور کنید:
حالت متمرکز و جهانی (یا ویژگی آن) از طریق دریافت کننده ها به کاربر نمایش داده می شود -> برنامه یک عمل را فراخوانی می کند -> عمل یک جهش را فراخوانی می کند. روی برای بازیابی حالت جدید و نمایش آن به کاربر از global state -> getters استفاده می شود.
از طریق این عناصر – می توانید مدیریت حالت پایدار و قابل نگهداری را انجام دهید.
نصب Vuex
چندین راه برای نصب Vuex وجود دارد – اکثر آنها وابسته هستند روی چگونه برنامه vue خود را ایجاد کردید
توجه داشته باشید: اگر قبلاً با نصب Vuex آشنا هستید process، می توانید این بخش را رد کرده و به قسمت بروید مدیریت متمرکز دولتی با Vuex بخش.
اگر پروژه شما از Vue CDN به جای ابزارهای دانلود شده مانند vue-cli یا vite، می خواهید دانلود کنید فایل منبع Vuex و آن را در نشانه گذاری برنامه خود بگنجانید:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
اگر از vue-cli، می توانید مستقیماً بسته های رسمی Vue مانند vue-router و vuex در طول نصب process.
ابتدا، می خواهید یک پروژه Vue جدید ایجاد کنید:
$ vue create project-name
اجرای این باید خروجی زیر را به ارمغان بیاورد:
از اینجا می‌توانید از صفحه‌کلید خود برای پیمایش به آن استفاده کنید ویژگی ها را به صورت دستی انتخاب کنید گزینه، برای اضافه کردن تمام بسته هایی که برنامه شما به آن نیاز دارد، از جمله Vuex:
متناوبا، اگر پروژه ای دارید که با استفاده از آن ایجاد شده است vue-cli یا Vite که از Vuex پشتیبانی قبلی ندارد، می توانید آن را نصب کنید npm یا yarn:
$ npm install vuex --save
# Or yarn
$ yarn add vuex
پیکربندی Vuex
اگر Vuex را به صورت بسته با yarn یا npm، باید به صراحت به Vue دستور دهید که از آن به عنوان یک افزونه استفاده کند:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
new Vue({...})
مدیریت متمرکز دولتی با Vuex
این فروشگاه مرکز تمام عملیات در یک برنامه Vuex است. این یک واکنش دهنده است container که وضعیت کل برنامه شما و همچنین توابع مورد نیاز برای خواندن و نوشتن در این مجموعه حالت را نگه می دارد. علاوه بر این، داده ها یا روش های تعریف شده در یک فروشگاه هستند جهانی، به این معنی که می توانید از هر جایی در برنامه vue خود به آنها دسترسی داشته باشید.
ما به راحتی می‌توانیم یک فروشگاه Vuex جدید با مقداردهی اولیه آن با استفاده از imported ایجاد کنیم Vuex:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {}
});
در حالی که خالی است – فروشگاه فقط مجموعه ای از حالت های خالی، جهش ها، اقدامات و دریافت کننده ها را دارد. ما می توانیم از طریق یک جهانی به این نمونه فروشگاه دسترسی پیدا کنیم this.$store نمونه، مثال! اگرچه، قبل از دسترسی به آن، ما می خواهیم آن را در نمونه Vue خود ثبت کنیم:
new Vue({
el: '#app',
store: store,
})
اکنون، می‌توانیم فروشگاه را با حالت‌ها و عملکردهایی پر کنیم که آن را برای ما مفید می‌سازد!
ایالت ویکس
Vuex را در نظر بگیرید حالت معادل باشد data در یک نمونه Vue. با این حال، بر خلاف data، هر چیزی که در یک وضعیت ذخیره می کنید جهانی است – به این معنی که به یک جزء محدود نمی شود و می تواند در هر جایی از برنامه شما قابل دسترسی یا تغییر باشد.
شما می توانید به سادگی با افزودن خصوصیات به حالت، ورودی هایی را به حالت اضافه کنید state فیلد نمونه فروشگاه:
const store = new Vuex.Store({
state: {
name: "John Doe",
age: 12,
details: {
city: "San Fransisco",
country: "USA",
},
},
});
در اینجا یک حالت برای آن تعریف کردیم username، age، و details (یک شی حاوی کاربر city و country). این خواص از state اکنون در سطح جهانی قابل دسترسی هستند!
به طور معمول، شما باید برخی از ثابت های جهانی را در اینجا تعریف کنید.
دسترسی به ایالات Vuex
ساده ترین راه برای بازیابی مقدار حالت، برگرداندن حالت از داخل یک ویژگی محاسبه شده است. فرض کنید می خواهیم به جهانی دسترسی پیدا کنیم name و age در فروشگاه ما بیان کنید:
computed: {
name() {
return this.$store.state.name;
},
age() {
return this.$store.state.age;
},
}
توجه داشته باشید: اعلام همه این ویژگی های محاسبه شده ممکن است زمانی که یک جزء نیاز به دسترسی به چندین حالت ذخیره داشته باشد، خسته کننده و پرمعنا شود. یک کلاس کمکی وجود دارد که فقط برای آن چیزی ایجاد شده است که در عرض یک دقیقه به آن خواهیم پرداخت!
البته، اکنون می توان به این مقادیر در نشانه گذاری ما دسترسی داشت:
<template>
<div id="app">
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
</div>
</template>
این mapState() یاور
اعلان خواص محاسبه شده، همانطور که در مثال قبلی مشاهده شد، ممکن است بسیار طولانی شود. با پیش‌بینی این، Vuex با کمکی برای تولید توابع دریافت‌کننده محاسبه‌شده ارسال می‌کند. این یک نقشه بردار دولتی و به شما اجازه می دهد تا به راحتی حالت های محاسبه شده را به نام های مستعار کوتاه تر نگاشت کنید.
به عنوان مثال، اجازه دهید import را mapState() کمک کننده عملکرد و نقشه state.name و state.age به نام مستعار کوتاهتر:
// First - import mapState
import { mapState } from "vuex";
export default {
name: "ComponentName",
computed: mapState({
name: (state) => state.name,
age: (state) => state.age,
}),
};
توابع گیرنده
توابع گیرنده توابعی هستند که برای آن استفاده می شود گرفتن یک ویژگی محاسبه شده از یک فروشگاه هنگام دریافت یک ویژگی – ممکن است قبل از بازگرداندن داده ها، در صورت نیاز، فیلتر، اعتبارسنجی یا دستکاری اضافی را انتخاب کنید.
توجه داشته باشید: گیرنده ها استفاده می شود فقط برای دریافت داده و عدم تغییر منبع اصلی. در حالی که شما می توان آنچه را که به کاربر برمی‌گردانید فیلتر و دستکاری کنید، نباید منبع اصلی را در جای خود تغییر دهید.
به عنوان مثال، بگویید حالتی وجود دارد که اعداد صحیح را ردیابی می کند. از طریق تابع گیرنده، می توانید اعداد را همانطور که هستند برگردانید، یا آنها را مرتب کنید و تعدادی از آنها را جدا کنید تا برگردند:
const store = new Vuex.Store({
state: {
myNumbers: (11, 3, 5, 1, 54, 56, ...),
},
getters: {
firstFiveSorted: (state) => {
return state.myNumbers.sort().slice;
},
},
});
این گیرنده در حال حاضر در دسترس است store.getters شی سراسری، و همچنین می تواند در داخل هر جزء قابل دسترسی باشد:
//...
computed: {
firstFiveSorted () {
return this.$store.getters.firstFiveSorted
}
}
اگرچه، این همچنین بعد از مدتی پرحرف می شود همانطور که شما می توانید حالت های نقشه به نام مستعار آنها، شما همچنین می توانید نقشه گیرها به نام مستعار خود، از طریق الف mapGetters() تابع کمکی:
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters({
// this example will map `myNumbers` to `this.$store.getters.firstFiveSorted`
myNumbers: "firstFiveSorted",
}),
},
};
جهش های Vuex
در Vuex، تنها راه برای تغییر وضعیت منبع، از طریق آن است جهش ها. شما ممکن است آنها را به عنوان methods ویژگی در یک نمونه Vue، اما برای تغییر وضعیت در یک فروشگاه Vue خدمت می کند. علاوه بر این، جهش ها انجام می شود از طریق فروشگاه، برای اطمینان از اینکه تغییرات قابل پیش بینی هستند.
توجه داشته باشید: بر اساس قرارداد، نام‌های جهش با حروف بزرگ نوشته می‌شوند و با آن تلطیف می‌شوند SNAKE_CASE.
جهش ها حالت را به عنوان اولین آرگومان و یک بار اختیاری (یعنی آرگومان های اختیاری لازم برای انجام جهش) را به عنوان دومین آرگومان دریافت خواهند کرد:
const store = new Vuex.Store({
state: {
myNumbers: (11, 3, 5, 1, 54, 56)
},
mutations: {
ADD_NUMBER(state, numberToAdd) {
state.myNumbers.push(numberToAdd);
},
}
})
و برای فراخوانی جهش، باید آن را فراخوانی کنیم store.commit() روش با نام جهش و بارگذاری آن، در صورت وجود بارگذاری:
this.$store.commit('ADD_NUMBER', 75);
تنها راه برای فراخوانی جهش این است که مرتکب شدن تغییر در فروشگاه، عبور در نام جهش.
توجه داشته باشید: یکی از نکات منفی جهش ها این است که آنها باید همزمان باشد، یعنی نمی توانید یک عملیات ناهمزمان در آنها انجام دهید. Vuex actions راه حلی برای این هستند که در بخش بعدی به آن خواهیم پرداخت.
اقدامات
از اقدامات برای واکشی و process داده ها قبل از داشتن یک جهش آن تغییر را انجام دهید علاوه بر این، شما می توانید به طور ناهمزمان جهش های متعدد ایجاد کنید تماس می گیرد از طریق اعمال، در حالی که خود جهش ها به صورت همزمان اجرا می شوند. علاوه بر این، کنش‌ها می‌توانند کنش‌های دیگری را فراخوانی کنند، برخلاف جهش‌هایی که باید از طریق آن فراخوانی شوند. commit() روش.
به یک معنا – شما می توانید اقدامات را به عنوان عوامل توانمند برای داده های جهش یافته، جایی که جهش ها آخرین بار سنگین را انجام می دهند.
اقدامات دریافت الف context جسم و یک بار اختیاری به عنوان پارامتر آنها. شی Context دسترسی به روش هایی مانند context.commit()، که به شما امکان می دهد جهش را انجام دهید. context.state()، و context.getters() به شما امکان می دهد به وضعیت فروشگاه و دریافت کننده ها دسترسی داشته باشید. این context هدف – شی نیست نمونه فروشگاه – فقط ویژگی های مشابه نمونه فروشگاه را در معرض نمایش می گذارد.
به عنوان مثال، فرض کنید می خواهیم یک عملیات ناهمزمان انجام دهیم که یک عدد تصادفی را به myNumber آرایه هر n ثانیه:
const store = new Vuex.Store({
state: {
myNumbers: (11, 3, 5, 1, 54, 56, "..."),
},
mutations: {
ADD_RANDOM_NUMBER(state) {
// Push a random number to `myNumbers` array
state.myNumbers.push(Math.floor(Math.random() * 10));
},
},
actions: {
// Using destructuring to extract only `commit()` from the `context` object
addNumber({ commit }, time) {
setInterval(() => {
commit("ADD_RANDOM_NUMBER");
}, time * 1000);
},
},
});
برای فراخوانی خود عمل نیز تماس می گیریم روی فروشگاه برای انجام این کار – از طریق dispatch() تابع:
store.dispatch('ADD_RANDOM_NUMBER', 10);
رفتن به فروشگاه تضمین می کند که وضعیت فقط به روشی قابل پیش بینی تغییر می کند.
نتیجه
در این راهنما، نگاهی به Vuex – فروشگاه مدیریت دولتی رسمی Vue انداخته‌ایم.
فروشگاه Vuex مجموعه ای از حالت ها، دریافت کننده ها، جهش ها و اقدامات است. State ها برای تعریف ویژگی های حالت جهانی استفاده می شوند، در حالی که از دریافت کننده ها برای به دست آوردن آنها استفاده می شود. می‌توانید ویژگی‌های حالت و دریافت‌کننده‌ها را به نام‌های مستعار کوتاهتر نگاشت کنید تا ارجاع به آنها آسان‌تر شود. جهش ها و کنش ها دست به دست هم می دهند تا ویژگی های حالت را به شیوه ای کنترل شده تغییر دهند.
با این – می توانید Vuex را برای پروژه بعدی Vue خود اعمال کنید!
منتشر شده در 1403-01-13 18:22:04
