bootstrap-vue 表上显示详细信息的问题答案

【问题标题】：Issue with show details on bootstrap-vue tablebootstrap-vue 表上显示详细信息的问题
【发布时间】：2018-12-02 15:04:47
【问题描述】：

有没有人遇到过这个错误，知道如何解决它

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

这一切都很好，直到我尝试在我的 bootstrap-vue 表中切换细节，当我得到 [vuex] 不要在突变处理程序之外改变 vuex 存储状态。即使我在隐藏的细节中什么都没有

有没有人遇到过这个问题，如果有，请问如何解决

非常感谢

【问题讨论】：

你有示例代码吗？

标签： vuejs2 bootstrap-vue

【解决方案1】：

我为解决这个问题所做的事情有点笨拙，但我在我的对象上定义了一个 _showDetails 属性，该属性显示在 b 表中，其中集合调用突变并且警告消失了；无需全局关闭 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
}

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

【讨论】：

【解决方案2】：

我也遇到了同样的问题。但是，我能够通过使用 vuex-map-fields 包来修复它。这使得双向数据绑定到 Vuex。这意味着 bootstrap-vue 表可以改变底层数据而不会引发 Vuex 错误。

虽然我认为计算属性上的 map 函数应该可以工作，但它没有。

【讨论】：

【解决方案3】：

是的，这是因为 bootstrap-vue 如何管理输入到其中的对象数组以创建表。

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

但是，当您调用其中一个添加的函数时，在这种情况下是 row.toggleDetails 函数，然后 Vuex 存储会意识到突变并抛出错误。

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

首先，如果你是从一个简单的 Vuex store 操作，你可以在 store 中添加这行代码（如本期所示：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))

【讨论】：