有没有办法将属性传递给 Vue JS 计算的 getter/setter？

Question

我正在尝试使用计算属性将我的输入字段与 Vuex 存储绑定。 所以我有

Data Streams

并且每个都有特定的

input fields

，它们不是固定的，而是从应用程序的管理部分进行管理，我必须向用户提供用户将选择特定数据流然后输入的功能将显示为从 API 收到的信息。

我试图实现这一目标，但这是我的障碍。计算属性（getter）无法接收属性，因此我无法告诉 vuex getter 要返回哪些数据。

请在下面找到我使用过的代码，是否有其他方法可以实现相同的功能？

我正在使用下一个版本：

• vue-2.6.1
• vuex - 3.6.2
• vuetify - 2.5.6

Vue JS 组件 - 输入字段

<v-text-field
    :key="input_index"
    v-model="data_stream_inputs[ds_index][input_index]"
    :label="input.name"
    :placeholder="input.placeholder"
></v-text-field>

计算属性（无法正常工作）

computed: {
    data_stream_inputs: {
        get() {
            return this.$store.getters['ActivateAudienceStore/getDataStreamInputByIndex'],
        set(value) {
            this.$store.commit('ActivateAudienceStore/SET_DATASTREAM_INPUT_BY_INDEX', value)
        }
    }
}

盖特

export const getDataStreamInputByIndex = (state) => (payload) => {
    return state.data_delivery.datastreams[payload.data_stream].inputs[payload.index]
}

Answer 1

data_stream_inputs

应该是一个函数，以便接收参数并像

data_stream_inputs({ index: index1 })[index2]

一样使用，这对于可写计算来说效果不佳。

v-model

不必在不直接的地方使用，它可以脱糖，例如在 Vue 2 中：

<v-text-field
    :value="$store.getters['someGetter']({ index: index1 })[index2]"
    @update:value="$store.commit('someMutation', $event)"
    ...