Вставить данные в динамический массив в Vue / Vuex

Question

У меня следующая ситуация: при выполнении изменения выбора я запускаю функцию, которая обращается к API и выполняет поиск. Результатом этого поиска является JSON. После выполнения поиска я пытаюсь получить определенные идентификаторы, однако в моем компоненте я не могу получить к ним доступ. Я новичок, прошу прощения за ошибки и отсутствие стандартов.

Вот мой код, где я запускаю @change на странице:

<select v-if="users.items" v-model="usuarioId" @change="getById(usuarioId)">
    <option value="" disabled selected>Escolha um Usuário</option>
    <option v-for="user in users.items" :key="user.id" :value="user.id">{{user.nome}}</option>
</select>

GetById в модуле:

import { usuarioSistemaService } from '../_services';

const state = {
all: {}
};

const actions = {
getById({ commit }, id){
  commit('getByIdRequest', id);

  usuarioSistemaService.getById(id)
    .then(
      usuarioSistemas => commit('getByIdSuccess', usuarioSistemas),
      error => commit('getByIdFailure', error)
    );
}
};

const mutations = {
getByIdRequest(state) {
  state.all = { loading: true };
},
getByIdSuccess(state, usuarioSistemas) {

  state.all = { items: usuarioSistemas };
},
getByIdFailure(state, error) {
  state.all = { error };
}
};

export const usuarioSistemas = {
namespaced: true,
state,
actions,
mutations
};

GetById в службе:

function getById(id) {
  const requestOptions = {
  method: 'GET',
  headers: authHeader()
  };

  return fetch(`${config.apiUrl}/usuariosistema/${id}`, requestOptions).then(handleResponse);
}

function handleResponse(response) {
return response.text().then(text => {
    const data = text && JSON.parse(text);
    if (!response.ok) {
        if (response.status === 401) {
            // auto logout if 401 response returned from api
            logout();
            location.reload(true);
        }

        const error = (data && data.message) || response.statusText;
        return Promise.reject(error);
    }

    return data;
});
}

В результате я хочу вставить данные (usuarioSistema.sistemaId) в этот массив -> systemId:

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data () {
        return {
            usuarioId: '',
            sistemaId: [],
        }
    }
}

Я пытался создать функцию javascript в «методах:» для этого, но объект всегда оказывается пустым. Я также пытался создать на странице что-то невидимое для подачи в этот массив, но это не сработало.

Не могли бы вы помочь мне, пожалуйста?

Спасибо

Answer 1

Вы можете получить доступ к данным хранилища в компоненте через вычисляемый объект и вспомогательную функцию Vuex's mapGetters:

https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper

Предполагая, что вы уже выполнили вызов API, вы можете сделать это следующим образом в своем компоненте:

computed: {
    ...mapGetters({
      'usuarioSistemas': 'usuarioSistemas/all'
    })
}

В коде вы должны иметь доступ к нему через this.usuarioSistemas (это псевдоним для usuarioSistemas / all).