我想使用Vuex存储有关我的客户端 - 服务器通信的状态,例如搜索逻辑:
// status is either synching|synched|error
state: { query:"", result:[], status:"synching" }
我实施了搜索操作。动作只能通过突变修改状态:
function search(context, query) {
context.commit("query", query);
context.commit("status", "synching");
// some asynch logic here
...
context.commit("result", result);
context.commit("status", "synched");
...
}
然而,现在突变也暴露于我的组件,它们现在能够使我的状态不一致。是否有可能隐藏组件中的突变?
答案 0 :(得分:-1)
动作可以直接改变状态。无需创建任何其他内容,以后可能会以错误的方式使用。只需直接使用行动。
var store = new Vuex({
state: {
something: ''
},
actions: {
async updateSomethingAsynchronnousWay ({state}, payload) {
var response = await axios.get(payload.src)
state.something = response.data.anyKey
}
}
})
new Vue({
store
el: '#app',
created () {
this.$store.dispatch({
type: 'updateSomethingAsynchronnousWay,
src: 'https//your.rest.api/something'
})
}
})