时间戳

首页 > 解决方案 > 如何使用 Vuex 商店修复 Buefy b-table 组件中的“计算属性 ... 已分配给但它没有设置器”错误

vuejs2 - 如何使用 Vuex 商店修复 Buefy b-table 组件中的“计算属性 ... 已分配给但它没有设置器”错误

问题描述

情况：

我的 Vuex 商店中有一个 VueJS2 应用程序，其中包含一系列项目：

export default new Vuex.Store({
    state: {
       checkedItems: []
    }
   ...

这个想法是通过这个数组让一个 buefy b-table 组件中的已检查（选定）项目全局可用。b-table 在我的组件中启动，如下所示：

 <b-table
   ...
   :checked-rows.sync="checkedItems"
   ...

并且商店的状态在组件内映射，如下所示：

...
  computed: {
     ...mapState(['checkedItems'])
   },
  ...

问题：

行在视觉上被选中（即复选框在选中/清除之间切换），但商店的 checkedItems 数组没有得到更新。我知道这一点，因为为了调试，我会显示数组的计数，无论我（取消）选择多少项目，它都保持为零。浏览器控制台显示“[Vue 警告]：已分配计算属性“checkedFrqs”，但没有设置器。” 当我选择一行时。

但是我注意到，当我在其中一个组件方法中手动推送一个条目时它会起作用，即：

this.checkedItems.push(row)

问题：

如何得到

:checked-rows.sync="checkedItems"

为 Vuex 阵列无缝工作？（PS 当我使用本地数组而不是 Vuex 商店的数组时，一切正常）

标签： vuejs2vuexbuefymapstatetoprops

解决方案

傻我，这解决了它：

:checked-rows.sync="$store.state.checkedItems"

（不使用 getters->mapState）

推荐阅读