构建一个 Vuex 模块答案

【问题标题】：Structuring a Vuex module构建一个 Vuex 模块
【发布时间】：2017-09-15 08:13:23
【问题描述】：

我在尝试保持我的 Vuex 模块清洁时遇到了一些麻烦，我希望能获得一些关于如何改进它的见解。我已经拆分了一些突变，并正在使用动作来组合多个突变，所以我想这是一个好的开始。

在大多数示例中，我看到了超级干净的突变，我也有这些突变，但是我需要检查 if 语句或其他副作用。举个例子：

我的行动：

setFilteredData({ state, commit }, payload) {
    commit('setFilteredData', payload);

    // Check if we need to split up the data into 'hotels' and 'nearby_hotels'.
    if (state.filteredData.find(hotel => hotel.nearby_city)) {
        commit('splitHotelsAndNearbyHotels', state.filteredData);
    }
}

我的突变：

splitHotelsAndNearbyHotels(state, payload) {
    // Chunk it up into hotels and nearby hotels.
    const composed = groupBy(payload, 'nearby_city');

    if (composed.true) {
        composed.true.forEach((hotel) => {
            if (hotel.isFirst) hotel.isFirst = false;
        });

        composed.true[0].isFirst = true;

        // Merge them back together in the right order.
        state.filteredData = composed.false.concat(composed.true);
    }
}

在这个例子中，如果我的对象数组包含一个将hotel.nearby_city 设置为true 的酒店，它将执行splitHotelsAndNearbyHotels 的提交。

代码不够透明。动作中的if 语句感觉不对，我希望我的突变更清晰。

我曾考虑将我的 splitHotelsAndNearbyHotels 拆分为单独的函数，但我不知道将它们放在哪里。简单地将它们放在 Vuex 文件中并没有太大的改进，我猜将它们放在单独的文件中可能是一种选择。

如何清理我的文件以提高可读性？也许有人可以向我展示一个 Vuex 示例，它没有像我正在处理的理想场景。

【问题讨论】：

我认为动作和突变都不是问题，如果有的话，它们的命名。 setFilteredData 有更好的名字吗？
一种方法是只为您的州提供一组酒店，并计算属性以获取每个过滤的酒店子集。这使代码更简单，因此当您需要更改酒店时，无论类型如何，都可以搜索一个数组。我假设您只是在您正在显示的列表的预设过滤器之间切换，因此需要更多上下文。正确的方法将根据您的需求而有所不同。这是一个相当开放的问题，缺乏重要的背景。解释为什么要“设置”过滤后的酒店，对我来说这听起来像是“获取”。好像我在这里遗漏了一些东西。

标签： vue.js vuejs2 vuex

【解决方案1】：

实际上您可以将您的操作代码移动到 getter 中，使用单一来源并在 getter 上过滤它更干净。但是如果你坚持使用动作，你可以将你的变异代码移动到动作中，并像这样重组你的动作代码：

Helper.js

这是为了提供数据和帮助函数：

var _ = require('lodash');

const payloadData = [
    {"name":"A", "nearby_city":true, "isFirst":true},
    {"name":"B", "nearby_city":false, "isFirst":false},
    {"name":"C", "nearby_city":false, "isFirst":false},
    {"name":"D", "nearby_city":true, "isFirst":false}
];

// assumed nearby_city is boolean
const isNearby = (hotels) => { return !!hotels.find(hotel => hotel.nearby_city === true) };
const groupBy = (items, key) => { return _.groupBy(items, item => item[key]) };

Mutations.js

这是你的突变现在的样子：

const mutations = {
    setfilteredData : (state, hotels) => {
        state.filteredHotels = hotels || [];
    },
}

Actions.js

这是你的操作，不用将你的函数移动到单独的文件中也没关系。

// separate filter function
const filterNearby = (payload) => {
    if(isNearby(payload) === false){
        return payload;
    }

    const composed = groupBy(payload, 'nearby_city');
    composed.true.forEach((hotel) => {
        if (hotel.isFirst) hotel.isFirst = false;
    });

    composed.true[0].isFirst = true;
    return composed.false.concat(composed.true);
};

const actions = {
    setfilteredData: ({state, commit}, payload) => {
        /**
         * Using separate filter function
         */
        commit('setfilteredData', filterNearby(payload));
        return;

        /**
         * Using restructured code
         */

        // Check if we need to split up the data into 'hotels' and 'nearby_hotels'.
        if(isNearby(payload) === false){
            commit('setfilteredData', payload);
            return;
        }

        // Chunk it up into hotels and nearby hotels.
        const composed = groupBy(payload, 'nearby_city');

        composed.true.forEach((hotel) => {
            if (hotel.isFirst) hotel.isFirst = false;
        });

        composed.true[0].isFirst = true;

        // Merge them back together in the right order.
        commit('setfilteredData', composed.false.concat(composed.true));
    }
};

【讨论】：