Question

请问有人遇到此错误，以及如何解决该错误

我正在通过nuxt和vuex模块从后端提取数据，并返回到组件中的表。

在我尝试获取[vuex]时不要尝试在我的bootstrap-vue表中切换详细信息之前，这一切都很好，请不要在变异处理程序之外对vuex存储状态进行变异。即使我没有任何隐藏的细节

有人遇到过这个问题吗？如果是的话，我该如何解决这个问题

非常感谢

Answer 1

是的，发生这种情况是因为bootstrap-vue如何管理馈入其中的对象数组以创建表。

当您定义b表组件并通过：items属性提供项目列表时，该组件将获取数组并对其执行转换，并添加函数和属性。这个过程似乎并未触发Vuex约束，以阻止突变函数之外的突变。

但是，当您调用添加的功能之一时，在本例中为row.toggleDetails函数，则Vuex存储区将意识到这些突变并抛出错误。

可能有两种方法可以解决此问题。

首先，如果您是在简单的Vuex商店中操作，则可以将以下代码行添加到商店中（如本期https://github.com/nuxt/nuxt.js/issues/1917#issuecomment-338471402所示）：

export const strict = false

这将消除针对突变的限制。这可能仅适用于简单的应用程序。

最好的选择是在计算属性上使用map函数。

computed: {
    myTableArr() {
         this.$store.getters['myTableArr'].map(mta => mta);
    }
}

有了这种保护措施，您将返回一个新数组，而不是对Vuex数组的引用。 bootstrap-vue b-table组件现在可以对其进行修改，并且您可以在代码中使用这些修改，而不会导致Vuex错误。

我通常还会在地图函数中使用构造函数，因此它是：

.map(mta => new modelConstructor(mta))

Answer 2

要解决这个问题，我的工作有些棘手，但是我在b表中显示的对象上定义了一个_showDetails属性，在该表中集合调用了一个突变，警告消失了；无需全局关闭Vuex的警告。

class myObject {
    constructor() {
        ...

        this.__showDetails = false;

    }
...
        get _showDetails () { return this.__showDetails}
        set _showDetails (value) { store.commit('toggleRowDetailsvisibility', {ref : this, val: value}) }

，然后在我的数据存储区中，定义了以下突变：

        toggleRowDetailsvisibility(state, parameters) { parameters.ref.__showDetails = parameters.val }

请注意上面代码中的_和双__...

Answer 3

我遇到了同样的问题。但是，我可以通过使用vuex-map-fields软件包来修复它。这样可以将双向数据绑定到Vuex。这意味着bootstrap-vue表可以变异基础数据而不会引发Vuex错误。

尽管我认为计算属性上的map函数应该可以工作，但不能。

有关Bootstrap-Vue Tabe的显示详细信息的问题

3 个答案: