پیاده‌سازی VueX روی پروژه

Implemention of VueX on the Project

Vue.JS 2: پیاده سازی VueX روی پروژه - قسمت 104

تا اینجای کار به خوبی جلو آمده ایم اما برنامه ما هیچ نوع state management ای ندارد بنابراین ادامه کار سخت شده است. در این جلسه می خواهیم VueX را روی پروژه خود پیاده سازی کنیم تا این مشکل برطرف شود. قدم اول برای این کار نصب vuex با کد زیر است:

npm install --save vuex

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

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

Vue.use(Vuex);

سپس باید store خود را تعریف کنیم:

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

Vue.use(Vuex);

export default new Vuex.Store({

});

حالا می توانیم درون این state و actions و mutations و غیره را تعریف کنیم. من از State شروع می کنم. من دوست دارم دو ماژول داشته باشم: یکی برای portfolio و دیگری برای stocks. با این حساب در این فایل (Store.js) چیزی از State نمی نویسم، بلکه یک پوشه دیگر درون Store ایجاد می کنم که modules نام دارد. این پوشه حاوی فایلی به نام Stocks.js است و باید درون آن state مربوط به stocks را بنویسم.

برای اینکه بدانیم چه state هایی را تعریف کنیم بهتر است با mutation ها شروع کنیم. زمانی که بدانیم چه چیز هایی را باید تغییر بدهیم، می دانیم که باید آن چیزها را تعریف کنیم. اولین mutation ای که داریم SET کردن Stock ها است: یعنی دو حالت وجود دارد که در آن ها Stock های ما تغییر می کنند. آن ها از سرور یا state خودمان هنگام باز کردن برنامه، بارگذاری می شوند (حالت اول) و همچنین زمانی که روی دکمه End Day کلیک کنیم و بخواهیم به صورت تصادفی مقدار سهام را تغییر بدهیم. بنابراین اولین mutation خود را تعریف می کنیم:

const state = {
    stocks: []
};

const mutations = {
    'SET_STOCKS'(state, stocks) {
        state.stocks = stocks;
    }
};

همانطور که گفتم فعلا Stocks در State خالی است تا بعدا آن را تکمیل کنیم. برای mutations من از یک رشته به عنوان نام استفاده کرده ام ('SET_STOCKS'). چرا؟ به دلیل اینکه بعدا اگر بخواهیم از Vue developer tools استفاده کنیم، این کار باعث شناسایی راحت تر و سریع تر mutation ها می شود اما هیچ اجباری در انجام این کار نیست. ما در این mutation مثل همیشه state را می گیریم اما مقدار stocks را نیز دریافت می کنیم که به عنوان payload به این mutation ارسال خواهد شد. این payload چه از سمت سرور باشد چه از هر جای دیگری، باید به این متد ارسال شود تا بتوانیم state.stocks (مقدار Stock ها) را برابر با آن قرار بدهیم.

برای mutation بعدی باید متدی داشته باشیم که قیمت stock های ما را به صورت تصادفی تغییر دهد. ما می خواهیم در هر روز، قیمت Stock ها تغییر کند. منطق این متد را بعدا می نویسیم اما فعلا بدنه خالی اش را قرار می دهیم تا یادمان نرود:

const mutations = {
    'SET_STOCKS'(state, stocks) {
        state.stocks = stocks;
    },
    'RND_STOCKS'(state) {

    }
};

RND_STOCKS مخفف random_stocks (سهام تصادفی) است. در مرحله بعد به سراغ تعریف action ها می رویم:

const actions = {
    buyStock: ({ commit }, order) => {
        commit();
    }
}

این action برای خرید سهام است و باید mutation ای را commit کند که در فایل portfolio.js خواهیم نوشت. از آنجایی که فعلا این فایل را نداریم، متد بالا را نیز خالی می گذاریم. البته مثل همیشه این متد شیء context را خواهد گرفت که ما فقط با commit کار داریم بنابراین با destructuring، فقط commit را از آن خارج کرده ایم. order یا سفارش ما برای خرید سهام نیز در همین action دریافت خواهد شد. action بعدی ما برای SET_STOCKS است:

const actions = {
    buyStock: ({ commit }, order) => {
        commit();
    },
    setStocks: ({ commit }) => {
        commit('SET_STOCKS', X);
    }
}

ما در این کد باید به جای X، مقدار payload را پاس بدهیم که همان stock بود اما stock های ما در فایل stocks.vue در پوشه Stocks ذخیره شده اند:

data() {
  return {
    stocks: [
      { id: 1, name: "BMW", price: 110 },
      { id: 2, name: "Google", price: 200 },
      { id: 3, name: "Apple", price: 250 },
      { id: 4, name: "Twitter", price: 8 }
    ]
  };
}

این مکان برای شروع پروژه مناسب بود اما حالا دیگر به درد نمی خورد. در حالت ایده آل این داده ها از یک سرور در اینترنت گرفته می شود اما ما سروری نداریم بنابراین یک فایل جداگانه برای ذخیره این داده ها ایجاد می کنیم. در پوشه src یک پوشه به نام data ایجاد کنید که دارای فایلی به نام stocks.js باشد. محتویات این فایل باید به شکل زیر باشد:

export default [
    { id: 1, name: "BMW", price: 110 },
    { id: 2, name: "Google", price: 200 },
    { id: 3, name: "Apple", price: 250 },
    { id: 4, name: "Twitter", price: 8 }
];

حالا به فایل stocks.vue در پوشه Stocks بروید و تمام قسمت Data را از آن حذف کنید تا به شکل زیر در بیاید:

<script>
import Stock from "./Stock";
export default {
  components: {
    appStock: Stock
  }
};
</script>

حالا به فایل Stocks.js در پوشه modules می رویم و فایل حاوی داده ها را در آن وارد می کنیم:

import stocks from '../../data/stocks';

const state = {
    stocks: []
};

const mutations = {
    'SET_STOCKS'(state, stocks) {
        state.stocks = stocks;
    },
    'RND_STOCKS'(state) {

    }
};

const actions = {
    buyStock: ({ commit }, order) => {
        commit();
    },
    setStocks: ({ commit }) => {
        commit('SET_STOCKS', stocks);
    }
}

یعنی در ابتدا Stocks را وارد این فایل کرده ایم، سپس آن را به Action ای به نام setStocks پاس داده ایم چرا که این Stocks ها باید در هنگام بارگذاری اولیه برنامه، load بشوند. از آنجایی که نام SetStocks ممکن است مفهوم ویرایش را برساند بهتر است نام آن را به initStocks (مخفف initiate stocks به معنی راه اندازی سهام) تغییر دهیم:

const actions = {
    buyStock: ({ commit }, order) => {
        commit();
    },
    initStocks: ({ commit }) => {
        commit('SET_STOCKS', stocks);
    }
}

action بعدی ما برای تصادفی کردن قیمت سهام است:

const actions = {
    buyStock: ({ commit }, order) => {
        commit();
    },
    initStocks: ({ commit }) => {
        commit('SET_STOCKS', stocks);
    },
    randomizeStocks: ({ commit }) => {
        commit('RND_STOCKS');
    }
}

این action نیز mutation ای به نام RND_STOCKS را صدا می زند که فعلا خالی است و در جلسات بعدی آن را تکمیل خواهیم کرد. مرحله بعد تعریف getter ها است بنابراین:

const getters = {
    stocks: state => {
        return state.stocks;
    }
}

منظور من از state.stocks همان آرایه Stock ای است که در بالای این فایل تعریف کرده ایم (state ما) و فعلا خالی است. در نهایت همه چیز را در قالب یک شیء export می کنیم:

const getters = {
    stocks: state => {
        return state.stocks;
    }
}

export default {
    state,
    mutations,
    actions,
    getters
}

حالا می توانیم به store.js برگشته و از این فایل استفاده کنیم:

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

import stocks from './modules/stocks';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        stocks
    }
});

آخرین مرحله اضافه کردن این Store به main.js است بنابراین به main.js رفته و آن را import می کنیم:

import App from './App.vue'
import { routes } from "./routes";
import store from './store/store';

در نهایت آن را به شیء سراسری Vue می دهیم:

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

اگر الان به مرورگر بروید هیچ چیز کار نمی کند چرا که هیچ وقت برنامه را initialize (راه اندازی) نکرده ایم. برای این کار به فایل App.vue می رویم و از lifecycle ای به نام Created استفاده می کنیم:

export default {
  components: {
    appHeader: Header
  },
  created() {
    this.$store.dispatch("initStocks");
  }
};
</script>

سپس به stocks.vue در پوشه components/stocks می رویم و می گوییم:

<script>
import Stock from "./Stock";
export default {
  components: {
    appStock: Stock
  },
  computed: {
    stocks() {
      return this.$store.getters.stocks;
    }
  }
};
</script>

این کار را کرده ایم تا آرایه ای به نام stocks داشته باشیم تا کد های template که حاوی v-for هستند، بتوانند درون آن گردش کنند. حالا اگر به مرورگر بروید، همه چیز باید مانند قبل باز شوند و stocks را ببینیم. از این به بعد Stock های ما از طریق VueX مدیریت می شوند.

avast lizenz kaufen

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان Vue js از صفر تا صد توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.