vuex 어떻게 redux 에서처럼 상점에서 여러 속성을 변경할 수 있습니까? 상태 돌연변이

Question

Vuex 접근 방식은 다음과 같습니다 :

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

그러나 나는 그것이 각 속성에 대한 board 및 fetching 독립적으로 대신 하나 내보기가 업데이트됩니다 두 번 두 가지 변화를 트리거 두려워 해요. 이것은 단지 하나의 돌연변이에 의해 돌연변이를 일으키는 더 복잡한 성질의 돌연변이를 가진 간단한 예일뿐입니다. vuex에서 가능합니까? 이 같은 뭔가를 찾고있다, 그래서

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

Answer 1

:

내가 한 번만 돌연변이 상태 개체를 반환하는 REDUX 접근 방식을 좋아?

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>