آغاز به کار با Vuex

در مرکز هر برنامه Vuex یک store است. "store" در واقع ظرفی است که state برنامه‌ی شما را نگه می‌دارد. دو مورد وجود دارد که فروشگاه Vuex را از یک global object ساده متفاوت می‌کند:

1) وقتی مؤلفه‌های Vue می‌خواهد state را از آن بازیابی کنند، در صورت تغییر state در store، آنها به طور کارآمد به‌روز می‌شوند.

2) نمی‌توان مستقیما ‌state را در store تغییر دهید. برای تغییر state، تنها راه commit کردن mutation است. با این کار می‌توان مطمئن شد که هر تغییر state یک رکورد قابل پیگیری از خود به جا می‌گذارد، که به ما کمک می کند تا برنامه‌های خود را بهتر بشناسیم.

پس از نصب Vuex، بیایید یک store ایجاد کنیم. این کار بسیار ساده است، فقط یک شی state اولیه و برخی mutationها را ارائه دهید:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

اکنون می‌توان با دستور store.state به شی state دسترسی پیدا کرد و با روش store.commit، تغییرات را روی آن ایجاد کرد:

store.commit('increment')

console.log(store.state.count) // -> 1

برای دسترسی به این this.$store در مؤلفه‌های Vue، باید store ایجاد شده را به نمونه Vue ارائه دهید.

new Vue({
  el: '#app',
  store: store
})

اکنون می‌توان در متدهای مؤلفه یک mutation را commit کرد:

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

باز هم، دلیل اینکه ما به جای تغییر مستقیم store.state.count از mutation استفاده می‌کنیم، این است که ما می‌خواهیم به طور صریح آن را ردیابی کنیم. این قرارداد ساده تصمیمات شما را صریح‌تر می‌کند، بنابراین در هنگام خواندن کد می‌توانید در مورد تغییرات state برنامه‌ی خود بهتر استدلال کنید.