为什么会出现错误“错误:[vuex]不在变异处理程序之外变异vuex存储状态。”
・错误步骤
1。输入表单数据
2.Click Submit(发送“ setFormData”)
3。输入表格数据
4。错误
[输入表单数据时,我将数据设置为tmpFormData。tmpFormData不是vuex状态。它是组件数据。
[也许,当执行程序“ this。$ store.dispatch('ranks / setFormData',this.tmpFormData)']] >>
tmpFormData和formData是否已连接?
pages / search.vue
<template> <v-container> <v-form ref="form" v-on:submit.prevent="search"> <v-list width=100%> <v-list-item v-for="(criteria, name, i) in searchCriterias" :key="i"> <v-subheader>{{criteria.name}}</v-subheader> <template v-if="criteria.type=='checkbox'"> <v-checkbox v-for="(item, j) in criteria.items" :key="j" v-model="tmpFormData[name]" :label="item" :value="j + 1" ></v-checkbox> </template> </v-list-item> </v-list> <v-btn color="success" class="mr-4" type="submit">Search</v-btn> </v-form> </v-container> </template> <script> export default { data () { return { tmpFormData: { search_1: null, search_2: null, search_3: null, search_4: null, }, searchCriterias: { search_1: { name: "sex", items: ["male", "female"], }, search_2: { name: "price", items: [ {label: "not selected", value: 0}, {label: "under 8000yen", value: 1} ], }, }, } }, methods: { async search() { await this.$store.dispatch('ranks/setFormData', this.tmpFormData) } } } </script>
store / search.js
export const state = () => ({ formData: [], }) export const mutations = { setFormData(state, formData) { state.formData = formData }, } export const actions = { async setFormData({ commit, getters }, formData) { commit('setFormData', formData) }, } export const getters = { formData (state) { return state.formData }, }
按照以下步骤修复后,错误消失了,但是我不知道为什么
setFormData(state, formData) {
state.formData.search_1 = formData.search_1
state.formData.search_2 = formData.search_2
state.formData.search_3 = formData.search_3
state.formData.search_4 = formData.search_4
},
为什么出现错误「错误:[vuex]不在变异处理程序之外变异vuex存储状态。」・错误步骤1.输入表格数据2.单击submit(dispatch“ setFormData”)3.输入表格数据4.error ...
我想您已经在vuex上设置了strict: true
。