در قسمت‌های قبلی (
^ ,
^ ,
^ ) نحوه‌ی ارتباط بین کامپوننت‌ها بررسی شد؛ روش دیگری هم برای به اشتراک گذاری داده‌ها بین کامپوننت‌ها وجود دارد که با استفاده از کتابخانه‌ای بنام
Vuex پیاده سازی میشود. وقتی برنامه‌ی شما وسعت پیدا میکند و ارتباط بین کامپوننت‌ها بیشتر و پیچیده‌تر میشود، روشهای قبلی (
^ ,
^ ,
^ ) کارایی لازم را ندارند و یا اینکه به سختی میشود داده‌های به اشتراک گذاشته شده‌ی بین کامپوننت‌ها را مدیریت نمود. در اینجا میتوان از Vuex استفاده کرد و به‌راحتی ارتباط‌های پیچیده‌ی بین کامپوننت‌ها را مدیریت کرد.
کد زیر را در نظر بگیرید:
new Vue({
// state
// داده‌ها در اینجا قرار میگیرند
data () {
return {
count: 0
}
},
// view
// ویوها برای نمایش داده‌ها مورد استفاده قرار میگیرند
template: `<div>{{ count }}</div>`,
// actions
// برای تغییر داده‌ها از متدها استفاده میکنیم
methods: {
increment () {
this.count++
}
}
}) 
در یک کامپوننت ساده، از طریق Actionها، داده‌ها (State) تغییر داده میشوند و سپس این تغییر در view مشاهده میشود. اما فرض کنید بیش از صد کامپوننت در برنامه دارید که بسیاری از آنها از داده‌های واحدی استفاده میکنند. روشهای قبلی (
^ ,
^ ,
^) برای چنین سناریویی جوابگو نخواهند بود (آن‌را به سختی میتوان مدیریت کرد و بسیار طاقت فرسا خواهد بود).
با استفاده از Vuex میتوان برای داده‌ها (State)، یک منبع در نظر گرفت تا کامپوننت‌ها قادر باشند از داده‌های واحدی استفاده کنند و اشتراک گذاری داده‌ها ساده شود.
یک برنامه ساده با استفاده از Vuex:
یک پروژه Vuejs را ایجاد کنید و مطابق تصویر زیر، گزینه دوم را انتخاب و Enter را فشار دهید:
سپس گزینه Vuex را طبق تصویر زیر با دکمه‌ی space انتخاب کنید و برای مابقی گزینه‌های بعدی با زدن Enter، پیش فرض‌ها را بپذیرید تا پروژه ساخته شود:
دو کامپوننت را به برنامه اضافه میکنیم.
کامپوننت اول با نام increase-counter-component.vue
<template>
<div>
<!-- نمایش شمارشگر -->
<h1>{{count}}</h1>
<!-- افزودن یک واحد به شمارشگر -->
<button @click="add">Add 1</button>
<!-- افزودن مقداری دلخواه به شمارشگر -->
<button @click="add2">Add 2</button>
</div>
</template>
<script>
// یا همان منبع ذخیره داده‌ها store کردن import
import store from "../store";
export default {
// You can consider computed properties another view into your data.
// https://css-tricks.com/methods-computed-and-watchers-in-vue-js/
computed: { count: () => store.state.count },
// به دو طریق فراخوانی شده add تابع
methods: {
// بدون پارامتر
add: () => store.commit("add"),
// با پارامتر
// برای مقدار مورد نظر استفاده کنیم input میتوانیم بجای مقدار ثابت از یک
add2: () => store.commit("add", 2)
}
};
</script>
کامپوننت دوم با نام decrease-counter-component.vue
<template>
<div>
<h1>{{count}}</h1>
<button @click="subtract">Subtract 1</button>
<button @click="subtract(3)">Subtract 3</button>
</div>
</template>
<script>
import store from "../store";
export default {
computed: { count: () => store.state.count },
methods: {
subtract: payload => store.commit("subtract", +payload)
}
};
</script>
درون کامپوننت اصلی برنامه App.vue، هر دو کامپوننت را فراخوانی میکنیم:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<counter-plus></counter-plus>
<hr />
<hr />
<counter-minus></counter-minus>
</div>
</template>
<script>
import counterPlus from "./components/increase-counter-component";
import counterMinus from "./components/decrease-counter-component";
export default {
name: "app",
components: {
"counter-plus": counterPlus,
"counter-minus": counterMinus
}
};
</script> محتویات فایل store.js که تنظیمات Vuex در آن لحاظ شده‌است به شکل زیر می‌باشد:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// داده‌های به اشتراک گذاشته شده
state: {
count: 0
},
// تعریف متدها
mutations: {
add(state, payload) {
// If we get a payload, add it to count
// Else, just add one to count
payload ? (state.count += payload) : state.count++;
},
subtract(state, payload) {
payload ? (state.count -= payload) : state.count--;
}
}
});
در Terminal دستور زیر را تایپ و اجرا کنید تا نتیجه رویت گردد:
چگونه کار میکند؟
در Vuex، متدها در قسمت mutation در فایل store.js نوشته میشوند و در
methods درون کامپوننت‌ها فراخوانی میشوند. اگر با سی شارپ آشنا باشید، این فراخوانی تقریبا شبیه
delegate می‌باشد. داده‌ها در store.js تعریف میشوند و در سراسر برنامه در تمام کامپوننت‌ها قابل دسترس می‌باشند. بدین ترتیب اشتراک گذاری داده‌ها بین کامپوننت‌ها بسیار ساده می‌باشد.
نکته: برای دریافت پکیج‌های مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:
سپس برنامه را با دستور زیر اجرا کنید: 
