调用vuex操作时状态变量变得未定义
调用vuex操作时状态变量变得未定义
提问于 2018-06-14 04:45:30
错误消息：Error: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field articleName)我正在尝试将表单中的变量添加到Firebase Cloud Firestore数据库中。我使用vuex进行全局状态管理。当我将变量从CreateSale组件传递到sale->状态时，它们会被定义。但是，当我在提交表单时调用动作createSale时，状态变量是未定义的。一切都应该正确设置。我注册了Vuex以及配置了firebase。
sale.js (vuex模块)
createSale(state, getters) {
console.log(state.articleName) //undefined
db.collection('clothes').add({
articleName: state.articleName,
description: state.description,
brand: state.brand,
price: state.price,
imagesRefs: getters.fileRefs
}).then(docRef => {
for (var i = 0; i < state.files.length; i++) {
}
this.$router.push('/')
}).catch(error => alert(error.message))
}CreateSale.vue模板：
<div class="container" id="createSale">
<form @submit.prevent="createSale" class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="articleName" v-on:change="setArticleName(articleName)" required>
<label>Article Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="description" v-on:change="setDescription(description)" required>
<label>Description</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="brand" v-on:change="setBrand(brand)" required>
<label>Brand</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input style="padding-top: 16px;" type="number" v-model="price" v-on:change="setPrice(price)" required>
<label>Price</label>
</div>
</div>
<UploadFile />
<button type="submit" class="btn btn-success">Submit</button>
<router-link to="/" class="btn grey">Cancel</router-link>
</form>
脚本：
export default {
name: 'createSale',
components: {
UploadFile
},
data() {
return {
articleName: '',
description: '',
brand: '',
price: ''
}
},
methods: {
...mapMutations('sale', [
'setArticleName',
'setDescription',
'setBrand',
'setPrice'
]),
...mapActions('sale', {
createSale: 'createSale',
console: 'console'
})
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-14 08:56:37
你的行动需要是
createSale({state, getters}) {
console.log(state.articleName) //undefined
db.collection('clothes').add({
articleName: state.articleName,
description: state.description,
brand: state.brand,
price: state.price,
imagesRefs: getters.fileRefs
}).then(docRef => {
for (var i = 0; i < state.files.length; i++) {
}
this.$router.push('/')
}).catch(error => alert(error.message))
}传递给action的第一个参数是context对象，您需要从此context对象获取state和getter。
来自vuex website的示例：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50846008
复制相关文章
相似问题