Javascript Vuex-仅在getter上修改状态对象_Javascript_Vue.js_Vuex_Vue Cli 3

Javascript Vuex-仅在getter上修改状态对象

javascript vue.js

Javascript Vuex-仅在getter上修改状态对象,javascript,vue.js,vuex,vue-cli-3,Javascript,Vue.js,Vuex,Vue Cli 3,我有很多具有关系的状态模块，以下是我的两个主要状态： channels.js const state = { channels: [ { id: 1, name: 'E-mail' }, { id: 2, name: 'SMS' } ] } const getters = { channel(state) {

我有很多具有关系的状态模块，以下是我的两个主要状态：

channels.js

const state = {
    channels: [
        {
            id: 1,
            name: 'E-mail'
        },
        {
            id: 2,
            name: 'SMS'
        }
    ]
}

const getters = {
    channel(state) {
        return (id) => {
            return _.find(state.channels, (channel) => {
                return channel.id == id
            })
        }
    },
    channels(state) {
        return state.channels
    }
}

wallets.js

const state = {
    wallets: [
        {
            id: 1,
            name: "Wallet A",
            channel_id: 1
        },
        {
            id: 2,
            name: "Wallet B",
            channel_id: 2
        }
    ]
}

const getters = {
    wallet(state) {
        return (id) => {
            return _.find(state.wallets, (wallet) => {
                return wallet.id == id
            })
        }
    },
    wallets(state) {
        return state.wallets
    }
}

当我调用getter

wallets/wallets

而不是return时：

[
    {
        id: 1,
        name: "Wallet A",
        channel_id: 1
    },
    {
        id: 2,
        name: "Wallet B",
        channel_id: 2
    }
]

有没有办法像这样回来

[
    {
        id: 1,
        name: "Wallet A",
        channel: {
            id: 1,
            name: 'E-mail'
        }
    },
    {
        id: 2,
        name: "Wallet B",
        channel: {
            id: 2,
            name: 'SMS'
        }
    }
]

编辑

基于8位答案，我尝试了以下代码，但没有成功：

import {http} from "../../support/http";
import axios from "axios";

const state = {
    actions: [],
    bots: [],
    conditions: []
}

const getters = {
    action(state) {
        return (id) => {
            return _.find(state.actions, (action) => {
                return action.id == id
            })
        }
    },
    actions(state) {
        return state.actions
    },
    bot(state) {
        return (id) => {
            return _.find(state.bots, (bot) => {
                return bot.id == id
            })
        }
    },
    bots(state, getters, rootState, rootGetters) {
        return state.bots.map((bot) => {
            let channels = bot.channels.map((item) => {
                let channel = rootGetters["channels/channel"](item.channel_id)
                let wallet = rootGetters["wallets/wallet"](item.wallet_id)

                return {
                    ...item,
                    channel,
                    wallet
                }
            })

            return {
                ...bot,
                channels: channels
            }
        })
    },
    condition(state) {
        return (id) => {
            return _.find(state.conditions, (condition) => {
                return condition.id == id
            })
        }
    },
    conditions(state) {
        return state.conditions
    },
    primaryConditions(state) {
        return _.filter(state.conditions, (condition) => {
            return condition.primary == true
        })
    },
    secondaryConditions(state) {
        return _.filter(state.conditions, (condition) => {
            return condition.primary == false
        })
    }
}

const actions = {
    fetchData({dispatch}) {
        function getActions() {
            return http.get('idr/actions')
        }

        function getBots() {
            return http.get('idr/bots')
        }

        function getConditions() {
            return http.get('idr/conditions')
        }

        return axios.all([
            getActions(),
            getBots(),
            getConditions()
        ]).then(axios.spread(function (actions, bots, conditions) {
            dispatch('setActions', actions.data.data)
            dispatch('setBots', bots.data.data)
            dispatch('setConditions', conditions.data.data)
        })).catch(error => console.error(error))
    },
    insertChannel({commit}, channel) {
        commit('INSERT_CHANNEL', channel)
    },
    setActions({commit}, actions) {
        commit('SET_ACTIONS', actions)
    },
    setBot({commit}, bot) {
        commit('SET_BOT', bot)
    },
    setBots({dispatch}, bots) {
        _.each(bots, (bot) => {
            dispatch('setBot', bot)
        })
    },
    updateBot({commit}, data) {
        commit('UPDATE_BOT', data)
    },
    deleteBot({commit}, bot) {
        commit('DELETE_BOT', bot)
    },
    setConditions({commit}, conditions) {
        commit('SET_CONDITIONS', conditions)
    }
}

const mutations = {
    INSERT_CHANNEL(state, data) {
        let index = _.findIndex(state.bots, {id: data.bot_id});

        state.bots[index].channels.push(data.channel)
    },
    SET_ACTIONS(state, actions) {
        state.actions = actions
    },
    SET_BOT(state, data) {
        let index = _.findIndex(state.bots, {'id': data.id})

        index > -1 ? state.bots[index] = data : state.bots.push(data)
    },
    UPDATE_BOT(state, data) {
        let index = _.findIndex(state.bots, {id: data.bot_id});

        state.bots[index].channels = data.channels
    },
    DELETE_BOT(state, bot) {
        let bot_index = _.findIndex(state.bots, {id: bot.id});

        state.bots.splice(bot_index, 1)
    },
    SET_CONDITIONS(state, conditions) {
        state.conditions = conditions
    }
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

getter正在正确返回数据，但是当我向数据属性添加特定的bot时，新属性就会消失

通过以下方式将Bot添加到数据：

<list-item v-for="bot in botsGetter" :key="bot.id" class="white-hover">
    <dropdown class="align-center">
            <template slot="menu">
                <li><a href="#" title="" @click.prevent="editBot(bot)">Editar</a></li>
            </template>
        </dropdown>
</list-item>

editBot(bot) {
    this.$bus.$emit('hide.dropdown')

    this.editBotModal = bot
}



编辑机器人（机器人）{
此.$bus.$emit（'hide.dropdown'））
this.editBotModal=bot
}

如果您可以从任何模块中的任何getter访问rootgetter，请检查Vuex API

所以你可以这样写你的

钱包

getter：

wallets(state, getters, rootState, rootGetters) {
  return state.wallets.map((wallet) => {
    const channel = rootGetters["channel/channel"](wallet.channel_id);

    return {
      ...wallet,
      channel
    }
  }
}

或者，如果您保持状态规范化（看起来是这样），则可以使用，但您可能也必须使用相同的库对存储进行规范化，并保留一组架构。

如果您可以从任何模块中的任何getter访问rootgetter，请检查Vuex API

所以你可以这样写你的

钱包

getter：

wallets(state, getters, rootState, rootGetters) {
  return state.wallets.map((wallet) => {
    const channel = rootGetters["channel/channel"](wallet.channel_id);

    return {
      ...wallet,
      channel
    }
  }
}

或者，如果您保持状态规范化（看起来是这样），那么您可以使用，但您可能也必须使用相同的库对存储进行规范化，并保留一组架构。

应用程序每个部分中的一个状态模块可以加载一个或多个模块，例如：在某些时候，它可能需要以下模块之一：

stateB\u id、stateC\u id或stateD\u id

。我怎样才能使它充满活力？一个小时后，我可能只想调用

stateB\u id和stateC\u id

，另一个小时只想调用

stateD\u id

。你能想出点什么吗？@CaioKawasaki请向代码展示你如何向数据对象添加“机器人”，如果你能用伪代码澄清或表示，我也不理解你的第一句评论。Hm向数据属性添加“机器人”会导致它在其通道数组中丢失数据，这毫无意义。让我们先修复你的突变也许这就是问题所在。你不能像在突变中那样更新数组。几乎每种情况下都需要返回一个新的数组。你不能改变你所在州已经存在的数组，因为Vue不会选择它并使它成为反应性的（或者忽略新的/更改的属性），这会导致奇怪的问题。从文档中查看。或者更好。例如，在您的

SET\u BOT

中，您不能只

state.bots.push（data）

。您需要创建一个新数组并添加该项，以便

[…state.bots，data]

。我可能发现了问题。。。我将数据作为道具传递，它不是被动的……我的状态模块之一，在应用程序的每个部分可以加载一个或多个模块，例如：在某个时刻，它可能需要以下模块之一：

stateB\u id、stateC\u id或stateD\u id

。我怎样才能使它充满活力？一个小时后，我可能只想调用

stateB\u id和stateC\u id

，另一个小时只想调用

stateD\u id

SET\u BOT

中，您不能只

state.bots.push（data）

。您需要创建一个新数组并添加该项，以便

[…state.bots，data]

。我可能发现了问题。。。我将数据作为道具传递，它不是被动的。。。