Question

我在VueJS中有一个表格，您可以在其中输入客户信息。输入数据后，单击“提交”，然后执行以下操作：

使用axios
将结果提交给更新对象的突变
观察者监视数据的变化，然后更新主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;
},

Computed＆amp;观察者

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

问题是在调用undefined日志输出之前调用与LOG 2相关的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 getters： https://vuex.vuejs.org/en/getters.html

VueJS - 使用商店更新状态时的'undefined'

1 个答案: