Vue.js Vuex-仅将突变暴露于操作

我想使用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");
    ...
}

---

然而，现在突变也暴露在我的组件中，它们现在能够使我的状态不一致。有可能隐藏组件的突变吗？

操作可以直接改变状态。没有必要创建任何其他东西，这些东西以后可能会被错误地使用。直接使用动作

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

---

你可能不应该那样做。状态是通过突变而不是动作来修改的。不幸的是，文档内容非常模糊，这会产生误导，并会导致以后出现问题，它还会破坏作为浏览器VueX插件一部分的VueX状态跟踪。此外，文档中还指出，只有通过突变才能更改状态：“在Vuex存储中真正更改状态的唯一方法是提交突变。”