Vue公司+ vuex對象突變

我有一個狀態：Vue公司+ vuex對象突變

state: { 
    objects: [ 
    { 
     id: 10, 
     key2: 'smth', 
     key3: 'smth' 
     //etc... 
    }, 
    { 
     id: 12', 
     key2: 'smth', 
     key3: 'smth' 
     //etc... 
    } 
    ] 
}

我挑一的ID然後我通過V模型改變它的鍵。

吸氣

activeObject: state => { 
    return state.objects.find((obj) => obj.id === state.objId) 
    }

在VUE模板

computed: { 
    obj() { 
     return this.$store.getters.activeObject 
    } 
    },

在HTML

問題是vuex告訴我，我必須做的唯一突變的變化。我看到了許多解決方案，如計算：get（）set（）或_.deepClone或更改只有一個鍵。但我能做些什麼來改變整個對象的ID在突變？我的陣列中的對象可能有很多鍵，所以寫更新提交func到每個鍵將是非常痛苦的..

有沒有一個解決方案，用1提交重寫對象的許多鍵？

請不要告訴我使用lodash或其他lbis，只有普通的vue/js。

來源

2017-08-27 Jesse Rei

你想改變對象或用新值（不可變）創建新副本嗎？ – Miguel

我是通過id來挑選對象，然後用getter在我的組件中使用它，並用v-model更改它的鍵，所以是的，我想重寫這個在對象中選取的對象 –

'我選擇一個id，然後我是通過v-model更改密鑰。「您是否會提供更多信息或代碼片段以在此顯示您的方法？ – choasia

是否有解決方案，用1提交重寫對象的許多鍵？

肯定有：

myMutation(state, { id, newItem }) { 
    const item = state.objects.find(item => item.id === id); 
    Object.assign(item, newItem); 
} 

//... 
const params = { id: 23, newItem: myNewItem }; 
store.commit('myMutation', params);

注意Vue公司不遵守陣列內部的變化。它不會對他們做出反應。

編輯後OP添加的源代碼樣本

你在做什麼是對Vuex的「單向數據流」的概念。如何處理你的使用情況是正好解釋了Vuex docs：

假設obj是從商店返回一個對象一個計算性能，V型模型，這裏將嘗試直接變異obj.message當用戶輸入中的類型。在嚴格模式下，這將導致錯誤，因爲突變不在顯式Vuex突變處理程序中執行。處理它的「Vuex方法」是綁定它的值並在輸入或改變事件上調用一個動作。

因此使用事件處理程序像

updateObj (e) { this.$store.commit('updateObj', e.target.value); }

那是從你的HTML代碼通過

<input :value="message" @input="updateObj">

注意，前面已經提到，Vue公司是否就能叫查看您在存儲的Object s/Array上的更改取決於您如何定義它們以及如何訪問s他們，見Vuex mutations。

來源

2017-08-27 07:49:55

我應該在哪裏做store.commit？實際上，它確實觀察到了，因爲我已經完成了它的工作，但拋出了錯誤，以便僅在突變時發生變異 –

使用'commit'的地方完全取決於您的上下文 - 但是給出了您的新代碼示例，如上所示：可能在「輸入」事件中。 Vue是否會看到你的變化是Vue和Vuex文檔中解釋的一個複雜主題，請參閱鏈接。 –

Vue公司+ vuex對象突變

回答

相關問題