Question

我有以下情况：在执行一次select更改时，我触发了前往API并执行搜索的函数。该搜索的结果是JSON。执行搜索后，我试图获取一些特定的ID，但是在我的组件中，我无法访问它们。我是一个初学者，对于错误和缺乏标准表示歉意。

这是我在页面上运行@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的mapGetters辅助函数访问组件中的存储数据：

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

假设您已经执行了API调用，则可以在组件中这样做：

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

在代码中，您应该能够通过this.usuarioSistemas（它是usuarioSistemas / all的别名）进行访问。

将数据插入Vue / Vuex中的动态数组

1 个答案: