نحوه‌ی پیاده‌سازی اولیه‌ی پکیج VueX

Implementation of the VueX Package

حالا که با مقدمات VueX آشنا شده ایم بهتر است کم کم به سمت پیاده سازی آن پیش برویم. یادتان باشد که ما یکجا VueX را پیاده سازی نخواهیم کرد، بلکه می خواهم کم کم برنامه خود را به آن نزدیک کنیم و مرحله به مرحله از قابلیت های آن استفاده کنیم تا گیج نشوید. اولین قدم برای این کار خارج کردن counter از فایل App.vue است:

export default {
  data() {
    return {
      counter: 0
    };
  },
  components: {
    appCounter: Counter,
    appResult: Result
  }
};

ما باید این خصوصیت را در یک فایل جداگانه و مرکزی قرار بدهیم. معمولا روش کار بدین شکل است که درون پوشه Src یک پوشه به نام store می سازید و تمام فایل های مربوط به VueX را درون آن قرار می دهید. البته این فقط یکی از قرارداد های رایج بین برنامه نویسان برای کار با VueX می باشد و الزامی نیست. حالا درون پوشه Store یک فایل به نام Store.js تعریف نمایید. در مرحله بعد برای اینکه بتوانیم از قابلیت های VueX استفاده کنیم، باید پکیج آن را با دستور زیر نصب کنیم:

npm install --save vuex

پس از نصب این پکیج، درون فایل store.js ابتدا Vue و سپس VueX را import می کنیم:

import Vue from 'vue';
import Vuex from 'vuex';

حالا همانطور که در فصل routing با استفاده از دستور Vue.use به فریم ورک Vue گفتیم که از پکیج vue-router استفاده کند، این بار می گوییم که از پکیج Vuex استفاده کند:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

با این کار پکیج Vuex را در فریم ورک خود فعال کرده ایم. حالا باید یک store جدید برای خودمان بسازیم. هر store شبیه یک انبار است که در آن state برنامه را مدیریت می کنیم. برای ساخت آن نیز می توان گفت:

Vue.use(Vuex);

new Vuex.Store({

});

دستور Vuex.Store یک شیء را دریافت کرده و به ما کمک می کند که یک store جدید بسازیم. حالا باید درون آن، از کلیدواژه state استفاده کرده و state برنامه خود را تعریف کنیم؛ یعنی تمام خصوصیات برنامه را در آن قرار دهیم که در برنامه ساده ما فقط counter است.

new Vuex.Store({
    state: {
        counter: 0
    }
});

state یک شیء را می گیرد که حاوی داده های مشترک برنامه شما باشد (همان خصوصیاتی که در Data تعریف می کردیم). همچنین یادتان باشد که state یک نام دلخواه نیست که بتوانید آن را تغییر دهید، بلکه یک کلیدواژه است و حتما باید به صورت state بیاید. حالا برای اینکه بتوانیم از این store در فایل های دیگر استفاده کنیم، باید آن را export نماییم بنابراین من می گویم:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        counter: 0
    }
});

یعنی Store خود را درون یک ثابت به نام store ذخیره کرده و سپس Export کرده ام. در حال حاضر Store ما در یک فایل جداگانه جاوا اسکریپت به نام store.js قرار دارد و Vue نمی تواند از آن استفاده کند. برای اینکه این فایل را به صورت سراسری در Vue ثبت کنیم باید به فایل main.js رفته و به شکل زیر عمل کنیم:

import { store } from './store/store';

new Vue({
  el: '#app',
  store: store,
  render: h => h(App)
})

یعنی ابتدا آن را import کرده و سپس دقیقا مانند router آن را به شیء سراسری Vue پاس می دهیم. البته اگر یادتان باشد، زمانی که key و value هر دو یک نام را دارند می توانیم value را حذف کنیم و من هم این کار را می کنم:

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

حالا که این Store را در Vue ثبت کرده ایم، چطور می توانیم به آن دسترسی داشته باشیم؟ ابتدا به Counter.vue بروید و به جای emit کردن رویداد updated، آن را مستقیما اضافه یا کم کنیم:

<script>
export default {
  methods: {
    increment() {
      this.$store.state.counter++;
    },
    decrement() {
      this.$store.state.counter--;
    }
  }
};
</script>

همانطور که می بینید ما می توانیم در هر کامپوننتی، با store$ به store خود دسترسی داشته باشیم. در مرحله بعد وارد Result.vue می شویم و به جای دریافت counter به صورت prop، یک خصوصیت computed تعریف می کنیم که همیشه مقدار counter در store را برگردانده و نمایش دهد:

<template>
  <p>Counter is: {{ counter }}</p>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter;
    }
  }
};
</script>

چرا از خصوصیت computed استفاده کرده ایم؟ به دلیل اینکه اگر مقدار counter در store تغییر کرد، مقدار counter در این کامپوننت نیز به روز رسانی شود. حالا می توانیم به App.vue رفته و کد های پاس دادن props و همچنین گوش دادن به updated را حذف کنیم:

<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1>Vuex</h1>
<app-result></app-result>
<hr />
<app-counter></app-counter>
</div>

همچنین دیگر نیازی به تعریف counter درون Data نداریم بنابراین data را حذف می کنم:

<script>
import Counter from "./components/Counter.vue";
import Result from "./components/Result.vue";

export default {
  components: {
    appCounter: Counter,
    appResult: Result
  }
};
</script>

حالا اگر به برنامه برویم، همه چیز به خوبی کار می کند و هیچ مشکلی نداریم. همانطور که می بینید برنامه ما بسیار یکنواخت تر و منظم تر شده است در حالی که قبلا برای پیدا کردن خصوصیات و ربط آن ها به هم باید بین event های emit شده و prop ها جست و جو می کردیم که کار زمان بری بود. البته این کد با اینکه کار می کند اما جای پیشرفت دارد و چند اشکال کوچک در آن دیده می شود که در قسمت های بعدی آن را بررسی خواهیم کرد.