Question

我将商店数据（Vuex）作为component的属性传递，但即使我没有更改数据，它也会给我突变错误。

编辑：Codepen说明错误：https://codesandbox.io/s/v8onvz427l

输入

<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>

在第三个组件中使用此行更改商店数据：

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

Answer 1

我非常确定你不应该在状态上放置一个vue组件。如果您应该这样做，那么我不认为vuex的创建者了解事件存储的工作原理。

在documentation中，它还表示您需要使用值来初始化您的州，而您不会这样做。

从状态中删除vue组件时，沙箱工作正常（状态应包含数据，但vue组件是包含数据和行为的对象）。

商店中的index.js：

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

无论出于何种原因，更改导入类的方式都会删除警告

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

详细信息：

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

将商店数据作为道具传递的Vue.js会导致突变警告

2 个答案: