Question

我使用Vuex显示来自＆＃39; store.js＆＃39;的用户列表。那个js文件有这样的数组。

<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
   <property name="basenames">
     <list>
       <value>file:${AN_ENV_CONFIGURED_DIR}/project.properties</value>
     </list>
    </property>
    <property name="cacheSeconds" value="1"/>
</bean>

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

{id：＆＃39; 1＆＃39;，名称：＆＃39;用户1＆＃39;，}

以上值是从URL（vue-resource）获得的。下面是将获得的数据推送到数组的代码。但是，数据未插入

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

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'})
      });
    }

推送到vuex商店阵列无法在VueJS中运行

1 个答案: