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 直接访问该节点。

Answer 2

现在您正在通过调用item.is_whatever = !item.is_whatever 直接更改状态对象，您需要做的是创建一个突变函数，它将为您执行该操作以保证适当的反应：

const store = new Vuex.Store({
  state: { /* Your state */ },
  mutations: {
    changeWhatever (state, item) {
      const itemInState = findItemInState(state, item); // You'll need to implement this function
      itemInState.is_whatever = !item.is_whatever
    }
  }
})

然后您需要将this.$store.commit('changeWhatever', item) 公开为您的视图中将由点击触发的操作。