无法正确添加到 Vuex store

Question

我有这个 Vuex 2 商店：

const datastore = new Vuex.Store({
  state: {          
    socketcluster: {
      connection: false,
      channels: []
    },
    selected_offers: []
  },
  mutations: {
    addOffer: function(offer) {
      datastore.state.selected_offers.push(offer) // first problem: cannot just use state.offers as it throws an undefined
    }
  },
  getters: {
    getOffers: function(){
      return datastore.state.selected_offers; 
    }
  }
});

在 Vue 2 组件中我这样做：

  methods: {
    clicked: function(){
      console.log("Toggle Offer");
      if ( datastore.getters.getOffers.filter(function(o){ o.id == this.offer.id } ).length == 0 ) {
        // add it
        datastore.commit('addOffer', this.offer)
      } else {
        // TODO remove it
      }
    }
}

当我触发该方法时，商店会发生如下变化：

我做错了什么？

Answer 1

传递给突变的第一个参数是 state 对象。因此，您将整个 state 对象推送到 selected_offers 数组。

您的变异方法应如下所示：

mutations: {
  addOffer: function(state, offer) {
    state.selected_offers.push(offer)
  }
},

这是documentation for vuex mutations。

Answer 2

这是使用 vuex 模式的简单方法，在大型应用程序中，您应该使用动作而不是直接从组件改变状态 "like I did "，如果是这样，我建议您阅读更多有关 vuex 的信息。

const store = new Vuex.Store({
  state: {          
    socketcluster: {
      connection: false,
      channels: []
    },
    selected_offers: [ "offer1", "offer2"]
  },
  mutations: {
    addOffer: function( state, offer ) {
      state.selected_offers.push(offer);
    }
  },
  getters: {
    getOffers: function( state ){
      return state.selected_offers; 
    }
  }
});

new Vue({ 
    store,
    data: function() {
      return {
          offer: "offer3"
      }
    },
    methods: {
      clicked: function() {
        if ( this.offers.length === 2 ) {
            this.$store.commit('addOffer', this.offer)
        } else {
          // TODO remove it
        }
      }
    },
    computed: {
        offers: function() {
            return this.$store.getters.getOffers;
        }
    }
}).$mount( "#app" );

<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script>


<div id="app">
    <div v-for="offer in offers" > {{offer}}</div>
    <button @click="clicked"> clicked </button>
</div>

无法正确添加到 Vuex store

Cannot add to Vuex store correctly

javascript

vue.js

vuex

vuejs2