假设我有下面的树:
[
{
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.
如果没有这个错误，我应该如何实现它？我看不出如何将动作或事件分派到树的顶部，因为它是嵌套的和递归的，所以我没有特定项的路径，对吗？