Question

我有一个用于视图组件的mixin，可用于设置每个页面的元数据。我正在使用Vuex来获取商店中的默认元数据。在每个组件中包括mixin时，我添加“元数据”数据属性，并将该值设置为商店中的默认元数据值。但是，当我在我的mixin /组件中重新分配“元数据”的值时，Vuex抱怨我试图在商店外进行突变。但是我只是在我的mixin中更改“元数据”的值。我没有触摸商店中的“默认元数据”。

有什么想法吗？

mixin：

    import store from 'Store/store'

    export default {
      data: function () {
        return {
          metadata: store.state.defaultmetadata
        }
      },
      computed: {
        getMetaData: function () {
          return this.metadata
        }
      },
      metaInfo () {
        let res = {
          title: this.getMetaData.title,
          meta: [
            { name: 'description', content: this.getMetaData.description }
          ]
        }
        return res
      },
      methods: {
        updateMetaData: function (key, value) {
          let regex = /(<([^>]+)>)/ig
          if (this.textNotEmpty(value)) {
            this.$set(this.metadata, key, value.replace(regex, ''))
            return true
          } else {
            return false
          }
        }
      },
      beforeRouteEnter (to, from, next) {
        next(vm => {
        })
      }
    }

在商店中引起突变的这一行：

this.$set(this.metadata, key, value.replace(regex, ''))

在这里，我正在设置本地数据属性“元数据”。如果我发表评论，Vuex不再抱怨。为什么这条线会触发存储数据的突变？

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

Answer 1

它们仍然指向同一参考，即浅表副本。您可以使用JSON.parse(JSON.stringify))创建深层副本

  data: function () {
    return {
      metadata: JSON.parse(JSON.stringify(store.state.defaultmetadata))
    }
  },

触发了不必要的Vuex存储状态突变

1 个答案: