2017-11-11 71 views
1

的狀態突變Vuex方法是如下:vuex如何改變store中的多個屬性,如在redux中?

const store = new Vuex.Store({ 
    state: { 
    fetching: false, 
    board: null 
    }, 
    mutations: { 
    setFething (state) { 
     state.fetching = true 
    }, 
    setCurrentBoard (state, board) { 
     state.board = board 
     state.fetching = false 
    } 
    } 
}) 

但我擔心它會引發兩個轉變爲boardfetching每個屬性獨立而不是一個,我的觀點將被更新雙重倍。這只是一個簡單的例子,我有更復雜的屬性突變,會更好地突變一個突變。 vuex有可能嗎?

我喜歡Redux的方法返回突變只有一次狀態對象:

initialState = { board: null, fetching: false }; 
export default function reducer(state = initialState, action = {}) { 
    switch (action.type) { 
    case Constants.SET_FETCHING: 
     return { ...state, fetching: true }; 

    case Constants.SET_CURRENT_BOARD: 
     return { ...state, ...action.board, fetching: false }; 
} 
+0

使用Vuex acrions。創建您同時執行多項更改的操作。 – WaldemarIce

+0

這種情況是我不能一次返回新的不可變狀態對象,但我必須分別改變每個屬性。 – luzny

回答

2

那麼,你在尋找這樣的事情?

var store = new Vuex.Store({ 
 
    state: { 
 
    id: 1, 
 
    name: 'aaa', 
 
    last: 'bbb' 
 
    }, 
 
    mutations: { 
 
    change (state, payload) { 
 
     state = Object.assign(state, payload) 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    store, 
 
    created() { 
 
    setTimeout(_ => { 
 
     this.$store.commit('change', { 
 
     id: 2, 
 
     last: 'ccc' 
 
     }) 
 
    }, 2000) 
 
    setTimeout(_ => { 
 
     this.$store.commit('change', { 
 
     name: 'ddd' 
 
     }) 
 
    }, 4000) 
 
    } 
 
})
<div id="app"> 
 
    {{ $store.state.id }} 
 
    <br> 
 
    {{ $store.state.name }} 
 
    <br> 
 
    {{ $store.state.last }} 
 
</div> 
 

 
<script src="https://unpkg.com/vue"></script> 
 
<script src="https://unpkg.com/vuex"></script>

相關問題