vuex 如何像 redux 一样改变商店中的多个属性?
vuex how mutate multiple properties in store like in redux?
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 中可以吗?
我喜欢 redux 方法 return 状态对象只变异一次:
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 };
}
那么,您在找这样的东西吗?
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>
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 中可以吗?
我喜欢 redux 方法 return 状态对象只变异一次:
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 };
}
那么,您在找这样的东西吗?
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>