Vue.js + Vuex:如何改变嵌套项状态？

Question

假设我有以下树:

[
    {
        name: 'asd',
        is_whatever: true,
        children: [
            {
                name: 'asd',
                is_whatever: false,
                children: [],
            },
        ],
    },
],

树通过Vuex在键'tree'下存储在模块中,并通过以下称为'recursive-item'的递归组件循环:

<li class="recursive-item" v-for="item in tree">
    {{ item.name }}

    <div v-if="item.is_whatever">on</div>
    <div v-else>off</div>

    <ul v-if="tree.children.length">
        <recursive-item :tree="item.children"></recursive-item>
    </ul>
</li>

现在我想切换项目的属性'is_whatever',所以我附加了一个监听器

    <div v-if="item.is_whatever" 
         @click="item.is_whatever = !item.is_whatever">on</div>
    <div v-else>off</div>

当我点击它,它工作,但发出以下

"Error: [vuex] Do not mutate vuex store state outside mutation handlers."
[vuex] Do not mutate vuex store state outside mutation handlers.

如果没有这个错误,我该如何实现呢？我看不到如何分派动作或将事件发送到树的顶部,因为它是嵌套和递归的,所以我没有到特定项目的路径,对吧？

Answer 1

在那天晚上晚些时候与其他一些开发人员协商后，我们提出了几种实现方法。因为数据嵌套在树中并且我以递归方式访问节点，所以我需要获取特定节点的路径，例如将节点的索引作为属性传递，然后在重复的同时添加子索引递归地在每个节点中，或仅传递节点的 id，然后在操作中运行递归循环以切换其属性。

更优化的解决方案可能是扁平化数据结构，从而避免递归的需要。然后可以通过 id 直接访问该节点。