时间戳

首页 > 解决方案 > Nuxtjs /Vuex 不适用于复杂对象

vuex - Nuxtjs /Vuex 不适用于复杂对象

问题描述

当我尝试更改表单中的值时，我收到以下消息，但适用于简单对象。

[vuex] 不要在突变处理程序之外改变 vuex 存储状态。

我有一个列表，我需要更新这个列表中的一个寄存器，所以会弹出一个填充的对话模式，需要更改或不更改字段，然后单击并保存更改，以防我关闭模式而不保存更改，值必须与以前相同。

我的表格

<v-layout wrap>
 <v-flex xs12 sm6 md4>
 <v-text-field  v-model="editedItem.personnel.name" label="Name"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.personnel.email" label="Email"></v-text-field>
</v-flex>

export default {
  name: "TheDealerPersonnel",
  components: { TheContentTitle },

  data: () => ({
    title: "Dealer Personnel",
    dialog: false,
    options: [],
    editedItem: {
      perosonneldealershipid: Number,
      dealerID: Number,
      personnelID: Number,
      dealer: Object,
      personnel: {
        personnelID: Number,
        name: String,
        email: String,
        companyID: Number,
        roleiD: Number,
        company: Object,
        role: {
          roleiD: Number,
          description: String,
          ranking: Number
        }
      }```

标签： vuexnuxt.js

解决方案

发生此错误不是因为对象很复杂，而是因为您试图更改 vuex 状态而不是突变，

我不确定它是否是导致问题的形式，但我猜你在你的应用程序的某个地方你正在改变一个 vuex 状态......

要更改 vuex 状态，您必须创建突变并提交更改

export const mutations = {
    SET_CHANGE: (state,change)=>{
       state.item = change
    }
}

可以调用commit('SET_CHANGE')

推荐阅读