Vuex中数组推送遇到问题？解析根源并提供解决方案

2024-03-01 13:49:40

Vuex数组推送问题

在使用VueJS的项目中，向Vuex store中的数组推送数据可能会遇到问题。本文将深入探究这个问题背后的原因，并提供有效的解决方案。

Vuex状态的不可变性

Vuex遵循状态不可变性的原则。这意味着一旦创建了状态对象，就不能直接修改它。要更新状态，必须创建一个新对象并替换旧对象。

数组推送的正确方法

错误的：

store.state.customers.push(data); // 错误！

正确的：

复制store.state.customers数组：

const newCustomers = [...store.state.customers];

向新数组newCustomers中推送新元素：

newCustomers.push(data);

使用commit提交一个mutation，将新数组设置到store.state.customers中：

store.commit('SET_CUSTOMERS', newCustomers);

mutation中定义SET_CUSTOMERS

在Vuex store中，使用mutation来处理状态更新，例如：

mutations: {
  SET_CUSTOMERS(state, newCustomers) {
    state.customers = newCustomers;
  },
},

实际应用

修改后的代码如下所示：

mounted: function() {
      this.$http.get('http://localhost/facebook-login/api/get_customers.php')
      .then(response => {
        return response.data;
      })
      .then(data => {
        const newCustomers = [...store.state.customers];
        newCustomers.push(data);
        store.commit('SET_CUSTOMERS', newCustomers);
        console.log(data); // prints { id: '2', name: 'User 2',}
      });
    }