Vuex errors

[nosizejosh]

using the package results in vuex state mutation errors, in strict mode

vue.esm.js?efeb:1743 Error: [vuex] Do not mutate vuex store state outside mutation handlers. at assert (vuex.esm.js?358c:97) at Vue.store._vm.$watch.deep (vuex.esm.js?358c:746) at Watcher.run (vue.esm.js?efeb:3235) at Watcher.update (vue.esm.js?efeb:3209) at Dep.notify (vue.esm.js?efeb:697) at Object.reactiveSetter [as y] (vue.esm.js?efeb:1014) at c (vue-grid-layout.min.js?dce4:1) at s (vue-grid-layout.min.js?dce4:1) at VueComponent.eval (vue-grid-layout.min.js?dce4:1) at Array.eval (vue.esm.js?efeb:1839)

anyone with a solution to this please?

[afdalwahyu]

hi i found a solution but its kinda hackish you need change layout data to component data not vuex data. and then use JSON.parse(JSON.stringify(data))

for example:

export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  data() {
    return { layout: [] }
  },
  mounted() {
    this.layout = JSON.parse(JSON.stringify(this.$store.state.layout))
  },
  methods: {
    layoutUpdatedEvent(newLayout) {
      this.layout = JSON.parse(JSON.stringify(newLayout))
      this.$store.commit('layout/setLayout', newLayout)
    },
  },
};

[nosizejosh]

@afdalwahyu thank you for the reply. Is there another package that does similar to vue-grid-layout and plays well with vuex as well? I need to be able to keep track of layout in the store. I need to be able to save layout to db and recall as well. I'm I using the wrong tool for the job? Are there better tools for this?

[lrembacz]

@nosizejosh https://github.com/jbaysolutions/vue-grid-layout/issues/157 Look at my last answer

[bell87]

Any idea why the layout won't load using a computed prop. I'm using vuex to fetch the layout from an API but when I try to load the page the browser tab becomes unresponsive. I've tried using JSON.parse(JSON.stringify(this.$store.state.layout)) but it doesn't seem to work.

    layout: {
      get() {
        return JSON.parse(JSON.stringify(this.$store.state.layout));
      }
    }

[lrembacz]

@bell87 I am not sure, but I think that there is an infinite loop in your solution. Data from store is mutated all the time and this change is trying to render component all the time. Give us code of your component where you are using GridLayout.

[Flourad]

hi i found a solution but its kinda hackish you need change layout data to component data not vuex data. and then use JSON.parse(JSON.stringify(data))

for example:

export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  data() {
    return { layout: [] }
  },
  mounted() {
    this.layout = JSON.parse(JSON.stringify(this.$store.state.layout))
  },
  methods: {
    layoutUpdatedEvent(newLayout) {
      this.layout = JSON.parse(JSON.stringify(newLayout))
      this.$store.commit('layout/setLayout', newLayout)
    },
  },
};

this solution works for me