[英]Vue.js passing store data as prop causes mutation warnings
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. 我将存储数据(Vuex)作为
component
的属性进行传递,但是即使我不更改数据,也会给我带来变异错误。
Edit: Codepen illustrating error: https://codesandbox.io/s/v8onvz427l 编辑:Codepen说明错误: 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 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"})
I'm quite sure you should not put a vue component on the state. 我很确定您不应该在状态上放置Vue组件。 If you are supposed to do that then I don't think the creators of vuex understand how an event store works.
如果您应该这样做,那么我认为vuex的创建者不了解事件存储的工作原理。
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). 从状态中删除vue组件时,沙箱工作正常(状态应包含数据,但vue组件是具有数据和行为的对象)。
index.js in store: 商店中的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"
});
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 https://forum.vuejs.org/t/getting-vuex-mutation-error-when-im-only-reading-the-data/27655/11
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.