Vue.js 和 Immutable.js答案

【问题标题】：Vue.js and Immutable.jsVue.js 和 Immutable.js
【发布时间】：2018-07-06 14:40:50
【问题描述】：

我正在开发一个 Vue.js 应用程序，我必须在其中处理深度嵌套的数据结构（树和 forests）。

在阅读了有关使用简单数据结构、纯函数和减少（非本地）突变的信息后，我相信接受这些想法会提高我的代码的可维护性和简单性。

在只使用纯函数实现树操作模块时，我学到了两件事：

避免 JavaScript 中嵌套对象的无意突变需要大量的关注和纪律，尤其是对于较大的团队
我不喜欢在代码中乱扔cloneDeep() 调用

昨天，我偶然发现了Immutable.js，这对我来说看起来很棒。在玩了一会儿之后，我觉得它使我的纯函数更容易推理。

我的 Vue.js 组件在与操作模块交互时会使用 fromJS(treeNode) 和 treeNode.toJS()。

我的问题：Vue.js 和 Immutable.js 在技术上是否可行？有哪些注意事项？人们在生产中使用这种组合吗？我发现了这个post，这似乎暗示了相反的情况。我能找到的就这些了。

有哪些注意事项或实际缺点？您会建议使用 Immutable.js 还是继续深度克隆常规对象？

编辑：根据投票更新了我的问题，使其（更少）基于意见

【问题讨论】：

标签： javascript data-structures vue.js tree immutable.js

【解决方案1】：

我自己只是读到这个，显然不是：https://forum.vuejs.org/t/immutable-js-with-vue/6366

【讨论】：

【解决方案2】：

我刚试过这个（出于好奇）。

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/vuex"></script>
        <script src="https://unpkg.com/immutable"></script>
    </head>
    <body>
        <div id="app">
            <button @click="increment">
                + (Increment)
            </button>
            {{ count }}
            <button @click="decrement">
                - (Decrement)
            </button>
            <hr>
            <input v-model="count" placeholder="Change Value"/>
        </div>
        <script>
const { Store } = Vuex;
const { Map } = Immutable;

const immutableCount = Map({
    value: 0
})

const countReducer = ({ state, type, value}) => {
    const count = state.count;
    let newCount;
    switch(type) {
        case 'INCREMENT':
            newCount = count.update('value', x => x + 1);
        break;
        case 'DECREMENT':
            newCount = count.update('value', x => x - 1);
        break;
        case 'SET_VALUE':
            newCount = count.set('value', value);
        break;
    }
    state.count = newCount;
}

const state = {
    count: immutableCount
}

const mutations = {
    INCREMENT(state) {
        countReducer({
            state,
            type: 'INCREMENT'
        })
    },
    DECREMENT(state) {
        countReducer({
            state,
            type: 'DECREMENT'
        })
    },
    SET_VALUE(state, value) {
        countReducer({
            state,
            type: 'SET_VALUE',
            value
        })
    }
}

const actions = {
    increment({ commit }) {
        commit('INCREMENT');
    },
    decrement({ commit }) {
        commit('DECREMENT');
    },
    setValue({ commit }, value) {
        commit('SET_VALUE', value);
    }
}

const store = new Store({
    state,
    mutations,
    actions
})

const dispatchers = {
    increment() {
        this.$store.dispatch('increment');
    },
    decrement() {
        this.$store.dispatch('decrement');
    },
    setValue(value) {
        this.$store.dispatch('setValue', value)
    }
}

const count = {
    get() {
        return this.$store.state.count.get('value');
    },
    set(value) {
        this.setValue(value ? value : 0)
    }
}

const computed = {
    count
}

const app = new Vue({
    el: '#app',
    computed,
    methods: {
        ...dispatchers
    },
    store
})
        </script>
    </body>
</html>

【讨论】：

看起来你做了一些工作，做得很好。但是，请扩展代码之外的内容。你为什么尝试这个？它是如何解决手头的问题的？