推送到 Vuex 存储数组在 VueJS 中不起作用

Question

我正在使用 Vuex 显示来自“store.js”的用户列表。那个js文件有这样的数组。

var store = new Vuex.Store({
  state: {
    customers: [
      { id: '1', name: 'user 1',},
    ]
  }
})

我想在同一个数组中插入一组新值

{ id: '1', name: 'user 1',}

上面的值是从一个 URL (vue-resource) 获得的。下面是将获取的数据推送到数组的代码。但是，数据没有插入

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

Answer 1

您正在尝试从 vue 组件修改 vuex 状态，您不能这样做。您只能从 mutation 修改 vuex 存储

你可以像下面这样定义一个突变：

var store = new Vuex.Store({
  state: {
    customers: [
      { id: '1', name: 'user 1',},
    ]
  },
  mutations: {
     addCustomer (state, customer) {
      // mutate state
      state.customers.push(customer)
    }
  }
})

现在你可以从 vue 实例提交这个变更，如下所示：

mounted: function() {
      this.$http.get('http://localhost/facebook-login/api/get_customers.php')
      .then(response => {
        return response.data;
      })
      .then(data => {
        store.commit('addCustomer', { id: '2', name: 'User 2'})
      });
    }