时间戳

首页 > 解决方案 > 在Vue / Vuex中将数据插入动态数组

arrays - 在Vue / Vuex中将数据插入动态数组

问题描述

我有以下情况：在 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 函数，但该对象始终为空。我还尝试在页面上创建一些不可见的东西来提供这个数组，但它没有用。

请问你能帮帮我吗？

谢谢

标签： arraysvue.jsvuex

解决方案

您可以通过计算对象和 Vuex 的 mapGetters 辅助函数访问组件中的存储数据：

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

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

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

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

推荐阅读