将存储数据作为属性传递的Vue.js会导致突变警告
将存储数据作为属性传递的Vue.js会导致突变警告
提问于 2018-02-15 10:59:41
我将存储数据(Vuex)作为component的一个属性进行传递，但即使我没有更改数据，它也会给我带来突变错误。
编辑:代码说明错误：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"})回答 2
Stack Overflow用户
发布于 2018-02-15 17:57:22
我非常确定您不应该将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"
});Stack Overflow用户
发布于 2018-02-16 13:57:43
无论出于何种原因，更改导入类的方式都会删除警告
const test = () => import('./Test')详细信息：
https://forum.vuejs.org/t/getting-vuex-mutation-error-when-im-only-reading-the-data/27655/11
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48799371
复制相关文章
相似问题
腾讯云开发者
