Vuex - получить свойство модуля из компонента - PullRequest
Новая
       19

Vuex - получить свойство модуля из компонента

0 голосов
/ 12 марта 2020

До того, как я добавил модуль, у меня было хранилище Vuex со свойством данных baseUrl, к которому я мог получить доступ из компонента, такого как: 

this.$store.state.baseUrl

Теперь я добавил модуль в Vuex сохранить и переместить свойство baseUrl внутри модуля: 

export const module1 = {

    state: {
        baseUrl: '',
    }
}

Модуль включен в Vuex: 

export default new Vuex.Store({

    modules: {  module1  },

Но теперь this.$store.state.baseUrl становится неопределенным. Я думал, что свойства модуля будут объединены в хранилище Vuex, поэтому я смогу получить доступ к свойствам с точно таким же кодом.

Как получить доступ к свойствам модуля? Если мне нужно сказать this.$store.state.module1.baseUrl, мне придется обновлять весь код везде, когда я перемещаю свойство из Vuex в модуль. И при перемещении свойства из одного модуля в другой я должен везде обновлять код, чтобы изменить имя модуля.

Однако даже this.$store.state.module1.baseUrl не работал. Я получил Cannot read property 'state' of undefined.

РЕДАКТИРОВАТЬ : Исправление! Я написал this.$store.module1.state.baseUrl, поэтому, когда я изменил на this.$store.state.module1.baseUrl, он работает.

Так это правильный способ доступа к свойствам модуля - я должен указать имя модуля? (и go через всю базу кода при перемещении свойства внутри модуля).

Ответы [ 2 ]

0 голосов
/ 16 марта 2020

Использование getters кажется хорошим способом - мне не нужно указывать имя модуля при получении свойства.

Так что если у меня есть: 

export const module1 = {

    state: { 
        baseUrl: '',
    },
    getters: {  
        baseUrl: state => state.baseUrl
    }

I можно получить свойство в компоненте с помощью: this.$store.getters.baseUrl

Так что, если я захочу, я могу переместить baseUrl и getter в другой модуль, и код все равно будет работать.

0 голосов
/ 12 марта 2020

Как вы уже указали в своем редактировании, вы должны использовать this.$store.state.module1.baseUrl для доступа к состоянию module.

Но это не единственный способ, вы также можете использовать mapState для доступа к состоянию из компонента: 

YourComponent.vue
import { mapState } from 'vuex'  // outside of export default

computed: {
    ...mapState('module1', ['baseUrl'])
}

baseUrl сейчас доступ через this.

...