javascript - “不要在突变处理程序之外改变 vuex 存储状态”错误,即使在为 prop 使用计算 var 之后也是如此
问题描述
使用以下组件,我收到一个Error: [vuex] do not mutate vuex store state outside mutation handlers.
错误:
<template>
<div>
<v-data-table
:headers="headers"
:items="items"
:search="search"
:key="tableKey"
:pagination.sync="pagination"
disable-initial-sort
rowKey
>
<template slot="items" slot-scope="props">
<tr @click="clicked(props.item)" :class="{'secondary': props.item[rowKey]===selectedCode}">
<td v-for="header in headers" :key="header.value">
<BaseTableColumn
:item="props.item"
:index="header.value"
:format="header.format"
/>
</td>
</tr>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
name: 'BaseTable',
props: {
headers: Array,
items: Array,
search: String,
tableKey: String,
rowKey: String,
},
data: () => ({
pagination: {
rowsPerPage: 10,
totalItems: -1,
},
selectedCode: -1,
}),
components: {
BaseTableColumn: () => import('@/components/base/BaseTableColumn'),
},
methods: {
clicked(row) {
window.scrollTo(0, 0);
this.selectedCode = row[this.rowKey];
this.$set(row, 'selected', true);
this.$emit('rowClick', row);
},
highlightFirst(items) {
this.selectedCode = this.items[0][this.rowKey];
this.$set(this.items[0], 'selected', true);
},
},
updated() {
if (this.selectedCode === -1 && (typeof this.items === 'object') && this.items.length > 0) {
this.highlightFirst(this.items);
}
},
};
</script>
供参考,这里是headers.js
:
const headers = [
{
text: 'Tenant Code',
value: 'code',
},
{
text: 'Tenant ID',
value: 'name',
},
];
export default headers;
和BaseTableColumn.vue
:
<script>
export default {
name: 'BaseTableColumn',
props: {
format: Function,
item: Object,
index: String,
},
methods: {
getText() {
return this.item[this.index];
},
},
render(createElement) {
if (this.$props.format) {
return this.$props.format(this.item, this.index, createElement);
}
return createElement('div', this.getText());
},
};
</script>
问题发生在这里:
this.$set(this.items[0], 'selected', true);
但是,如果我像这样遵循文档:
<template>
<div>
<v-data-table
:headers="headers"
:items="tableRows"
:search="search"
:key="tableKey"
:pagination.sync="pagination"
disable-initial-sort
rowKey
>
...
</template>
<script>
export default {
name: 'BaseTable',
props: {
headers: Array,
items: Array,
search: String,
tableKey: String,
rowKey: String,
},
...
computed: {
tableRows() {
const rows = [...this.items];
return rows;
},
},
...
methods: {
...
highlightFirst(items) {
this.selectedCode = this.items[0][this.rowKey];
this.$set(this.tableRows[0], 'selected', true);
},
},
updated() {
if (this.selectedCode === -1 && (typeof this.tableRows === 'object') && this.tableRows.length > 0) {
this.highlightFirst(this.tableRows);
}
},
};
</script>
即使我没有引用或改变道具,我仍然会收到错误,特别是在updated()
钩子和方法中。highlightFirst()
我还需要更改哪些内容才能消除此错误?
解决方案
我最终解决这个问题的方法是发出一个事件并使用row
父组件中的值:
clicked(row) {
window.scrollTo(0, 0);
this.selectedCode = row[this.rowKey];
this.$emit('rowClick', row);
},
但是,就@Jesper 的上述观点而言,从那时起,我一直在使用Object.assign()
这种需要断开与 Vuex 的链接的情况。
推荐阅读
- linux - 添加触摸屏支持 imx6
- json - 使用换行符 flask/jinja2 渲染 json 数据
- python - 往返 Python 的 ElementTree from/tostring 丢弃命名空间
- c# - 如何使用 VS2017 Vstest.console.exe 运行 VS 2015 测试
- javascript - NPM package's dependency requires lower version than the "wanted" version
- sql-server - 修改其他表的价格列时更新列。触发器。嵌套表。SQL 服务器
- node.js - GRPC如何重用客户端连接?
- sql - PostgreSQL函数返回表
- c++ - C++ How to delete a specific row or column in a dynamically allocated 2d array?
- javascript - How to export an object from a separate file to both Node and Javascript?