Как получить значение из состояния, так как мой получатель vuex возвращает пустое значение в обозревателе

Question

Getter возвращает пустое значение в обозревателе.Но состояние устанавливается правильно в мутации.

Невозможно проверить в инструментах разработчика Vuex в консоли, как это говорит "Магазин не обнаружен".Я проверил это, войдя в консоль

Vue Файл:

---

computed: {
    ...mapGetters('listings', ['listingContracts']),
},

methods: {
    ...mapActions('listings', [
      'productBasedListings',
    ]),
},

onChange(product) {
      this.productBasedListings( product.id );
      console.log('LIST:', this.listingContracts); // Empty in observer
},

Магазин:

---

state: {
    contracts: [],
},

getters: {
    listingContracts(state) {
      console.log('GETTER', state.contracts); // Empty in observer
      return state.contracts;
    },
},

mutations: {
    setListing(state, { lists }) {
      state.contracts = lists;
      console.log('AFTER MUTATION:', state.contracts); // Setting the value properly
    },
},

actions: {
    async productBasedListings({ commit }, { id, state }) {
      let listing = [];
      try {
        listing = await publicApi.listings(id);
        console.log('ACTION:', listing);

        commit({
          lists: listing,
          type: 'setListing',
        });
      } catch (e) {
        console.error(`Failed to change  #${id} state to  #${state}:\t`, e);

        throw e;
      }
    },
}

Здесь "Getter" делаетне имеют никаких значений, но "После мутации" у нас есть значения.

Answer 1

Поскольку изначально переменная хранилища пуста. Значения сами задаются в мутации. Теперь, когда вызывается мутация, появляется значение.

Что ж, теперь, чтобы получить данные после запуска мутации, используйте async await в вашем методе какниже:

async onChange(product) {
      await this.productBasedListings( product.id ).then(() => {
      console.log('LIST:', this.listingContracts); 
      })
},