無法添加到Vuex商店正確

我有這個Vuex 2店：無法添加到Vuex商店正確

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 
     } 
    } 
}

會發生什麼事是，當我觸發法，店內變化如下：

我在做什麼錯？

來源

2017-05-08 Nick M

傳遞給突變的第一個參數是state對象。因此，您將整個state對象推向selected_offers陣列。

你突變的方法應該是這樣的：

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

這裏的documentation for vuex mutations。

來源

2017-05-08 17:36:31 thanksd

真棒。不知道我怎麼錯過了。猜猜我從來沒有看過實際的參數。 –

這是一個使用vuex模式的簡單方法，在大型應用程序中，您應該使用動作而不是直接從組件中直接改變狀態，如果是這樣的話，我強烈建議您閱讀更多有關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>

來源

2017-05-08 18:01:42

我沒有從組件中改變狀態，但有一個組件方法調用商店變化。 –

是的，我們都談論同樣的事情。對不起，我不夠清楚，我的意思是不是在組件中提交突變，如果組件調度一個動作會更好。並且該行爲本身承諾突變。還有一件事，一旦你在全球Vue實例中註冊你的商店，它將在所有其他組件中的這個.store存儲中被訪問。 –

無法添加到Vuex商店正確

回答

相關問題