Vue.js passing store data as prop causes mutation

Question

I'm passing store data (Vuex) as a property of component but it's giving me mutation errors even though I'm not changing the data.

Edit: Codepen illustrating error: https://codesandbox.io/s/v8onvz427l

Input

<template>
    <div>
        <input type="text" class="form-control" ref="input" />
        <div style="padding-top: 5px">
            <button @click="create" class="btn btn-primary btn-small">Create</button>
        </div>
        {{ example }}
    </div>
</template>

<script>
    import store from "@/store"

    export default {
        props: {
            "example": {

            }
        },
        data() {
            return {
                store
            }
        },
        methods: {
            create() {
                store.commit("general_set_creation_name", {name: this.$refs.input.value})
            }
        }
    }
</script>

Modal.vue

<template src="./Modal.html"></template>

<script>
    import $ from 'jquery'

    import store from '@/store'

    export default {
        props: {
            "id": String,
            "height": {
                type: String,
                default: "auto"
            },
            "width": {
                type: String,
                default: "40vw"
            },
            "position": {
                type: String,
                default: "absolute"
            },
            "component": {
                default: null    
            },
            "global": {
                default: true
            }
        },
        data () {
            return {
                store: store
            }
        },
        computed: {
            body () {
                return store.state.General.modal.body
            },
            props () {
                return store.state.General.modal.props
            },
            title () {
                return store.state.General.modal.title
            },
        },
        methods: {
            close_modal (event) {
                if (event.target === event.currentTarget) {
                    this.$refs.main.style.display = "none"
                }
            }
        }
    }
</script>

<style scoped lang="scss" src="./Modal.scss"></style>

Modal.html

<div 
    :id="id"
    class="main" 
    ref="main" 
    @click="close_modal"
>
    <div ref="content" class="content" :style="{minHeight: height, minWidth: width, position}">
        <div ref="title" class="title" v-if="title">
            {{ title }}
        </div>
        <hr v-if="title" />
        <div ref="body" class="body">
            <slot></slot>
            <component v-if="global" :is="body" v-bind="props"></component>
        </div>
    </div>
</div>

Changing store data with this line in a third component:

store.commit("general_set_modal", {body: Input, title: "New "+page, props: {example: "example text 2"})

Answer 1

I'm quite sure you should not put a vue component on the state. If you are supposed to do that then I don't think the creators of vuex understand how an event store works.

In the documentation it also says you need to initialize your state with values and you don't do that.

Your sandbox works fine when removing the vue component from the state (state should contain data but vue components are objects with both data and behavior).

index.js in store:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    modal: {
      body: {},
      title: "",//det it to something
      props: {}
    },
    creationName: null
  },

  mutations: {
    general_set_creation_name(state, payload) {
      state.creationName = payload.name;
    },
    general_set_modal(state, payload) {
      state.modal.title = payload.title;
      state.modal.props = payload.props;
      console.log("we are fine here");
    }
  },
  strict: process.env.NODE_ENV !== "production"
});

Answer 2

For whatever reason, changing the way I import the class removes the warning

const test = () => import('./Test')

Details:

https://forum.vuejs.org/t/getting-vuex-mutation-error-when-im-only-reading-the-data/27655/11