无法添加到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
}
}
}
会发生什么事是，当我触发法，店内变化如下：
我在做什么错？
答
传递给突变的第一个参数是state对象。因此，您将整个state对象推向selected_offers阵列。
你突变的方法应该是这样的：
mutations: {
addOffer: function(state, offer) {
state.selected_offers.push(offer)
}
},
答
这是一个使用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>+0
我没有从组件中改变状态，但有一个组件方法调用商店变化。 –
+0
是的，我们都谈论同样的事情。对不起，我不够清楚，我的意思是不是在组件中提交突变，如果组件调度一个动作会更好。并且该行为本身承诺突变。还有一件事，一旦你在全球Vue实例中注册你的商店，它将在所有其他组件中的这个.store存储中被访问。 –
真棒。不知道我怎么错过了。猜猜我从来没有看过实际的参数。 –