VueJS - 使用商店更新状态时出现“未定义”

Question

我在 VueJS 中有一个表单，您可以在其中输入客户信息。输入数据并单击“提交”后，它的作用如下：

1. 使用axios调用将客户详细信息存储到数据库中的操作

2. 将结果提交给更新对象的突变

3. 观察者观察数据的变化，然后更新主 vue 中的对象。

我写的代码是：

动作

addCustomer: function (context, payload) {
   axios.post(`/customers`, {
     customer_name: payload.customer_name,
   }).then(function(message) {
      context.commit("FETCHCUSTOMER", {
        model: message.data.model
   });
});
}

变异

FETCHCUSTOMER: function (state, payload) {
   state.customers.single = payload.model;
},

计算和观察者

customer_created() {
  return this.$store.state.customers.single;
}
// watcher 
customer_created() {
   console.log("Getting here - 1");
   var vm = this;
   vm.customer = this.$store.state.customers.single;
},

然后使用 submit 方法调用它，该方法具有以下内容：

this.$store.dispatch('addCustomer', vm.customer); 
console.log(vm.customer); // LOG 2 

问题是与LOG 2 相关的undefined 在调用Getting here - 1 日志输出之前被调用，这意味着当用户单击提交时，正在创建客户但我需要返回该客户的ID所以我可以在系统中进步。这目前显示为undefined 但是，再次单击该按钮会显示正确的 id..

有没有办法我可以执行以下操作，以便在无需单击提交按钮两次的情况下更新状态？

编辑：

我有以下computed

customer_created() {
  return this.$store.getters.customers.single;
},

我有以下watcher

customer_created: {
   handler: function(val, oldVal) {
       console.log(val);
   },
   deep: true
}

这只是在我重新加载页面时输出undefined，但是当单击调用this.$store.dispatch('addCustomer', vm.customer); 的提交按钮时没有显示任何内容？

Answer 1

尝试使用 Vuex getters。

在您的商店对象中，定义它：

getters: {
  customers(state) {
    return state.customers
  }
}

确保您的商店state 包含customers：

state: {
  customers: {
    single: null,
  },
  // ...
}

然后在你的组件中computed:

customer_created() {
  return this.$store.getters.customers.single
},

customers() {
  return this.$store.getters.customers
}

你可以这样看：

watch: {
  customers: {
    handler(newCustomers) {
      console.log('Customers changed')
      console.log(newCustomers.single)
    },
    deep: true
  }
}

如果您不想看到客户的强烈反对，也可以这样。

watch: {
  customers(newCustomers) {
    console.log('Customers changed')
    console.log(newCustomers.single)
  }
}

Vuex 吸气剂： https://vuex.vuejs.org/en/getters.html