API композиции

Для доступа к хранилищу внутри хука setup вы можете вызвать функцию useStore. Это эквивалентно получению this.$store внутри компонента с использованием API опций.

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

Доступ к состоянию и геттерам

Для доступа к состоянию и геттерам необходимо создать ссылки computed, чтобы сохранить реактивность. Это эквивалентно созданию вычисляемых свойств с использованием API опций.

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      // access a state in computed function
      count: computed(() => store.state.count),

      // access a getter in computed function
      double: computed(() => store.getters.double)
    }
  }
}

Доступ к мутациям и действиям

При доступе к мутациям и действиям можно просто указать методы commit и dispatch внутри хука setup.

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      // access a mutation
      increment: () => store.commit('increment'),

      // access an action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}

Примеры

Посмотрите примеры использования Vuex и API композиции Vue в примерах приложения API композиции.

Структура приложения

Плагины