时间戳

首页 > 解决方案 > 仅使用突变的有效负载参数来修改 Vuex 状态是否可以？

javascript - 仅使用突变的有效负载参数来修改 Vuex 状态是否可以？

问题描述

例如，我是否可以遍历 Vue 文件中的 Vuex 数据并选择需要更新的数据，然后将找到的数据传递给一个动作，该动作提交它，然后突变只进行更新？

我不确定的原因是因为 Vuex 突变的典型格式包含“状态”的参数，所以我认为需要使用它，唯一的方法是在内部进行所有循环突变，或将索引传递给它以更快地找到需要更改的确切字段。

对于谁问，一个代码示例：

一些VueFile.vue

computed: {
    ...mapState({
      arrayOfObjects: (state) => state.someVuexStore.arrayOfObjects
    }),
},
methods: {
    myUpdateMethod() {
        let toBePassedForUpdate = null;
        let newFieldState = "oneValue";
        this.arrayOfObjects.forEach((myObject) => {
            if (myObject.someDataField !== "oneValue") {
               toBePassedForUpdate = myObject.someDataField;     
            }
        })

         if (toBePassedForUpdate) {
             let passObject = {
                 updateThis: toBePassedForUpdate,
                 newFieldState: newFieldState
             }

             this.$store.dispatch("updateMyObjectField", passObject)
         }
    }
}

一些VuexStore.js

const state = {
  arrayOfObjects: [],
  /* contains some object such as:
    myCoolObject: {
      someDataField: "otherValue"
    }
  */
}

const mutations = {
  updateMyObjectField(state, data) {
    data.updateThis = data.newFieldState;
  }
}

const actions = {
  updateMyObjectField(state, data) {
    state.commit("updateMyObjectField", data);
  }
}

标签： javascriptvue.jsstatevuex

解决方案

是的，通过 payload 参数而不是state. Vuex 不会费心去区分这两者。在任何一种情况下，它都是相同的状态，并且这两个选项都没有减损使用突变的目的。

为了更加确定这一点，您可以询问突变和强制使用它们的目的是什么。答案是为具体定义的状态更改保留一个集中的、可跟踪的位置。

为了说明这是一件好事，想象一个有 1000 个组件的应用程序，每个组件都在本地、在突变之外以不同的方式改变状态。作为第 3 方调试或理解这可能是一场噩梦，因为您不知道状态如何或在何处发生变化。

因此，突变强制执行方式和集中位置。仅在突变中使用有效载荷参数都不会损坏这些。

推荐阅读