Question

我只想在VueX状态下更改数据而不通过以下步骤传递值>操作>突变>状态，然后从其他组件中的VueX状态获取getData，是否可能这样做或任何人都有另一种最好的方式来发送值数组到... mapAction，请向我解释，

实际上，我只想将带有数组的数据发送到其他组件，每次用户在使用它的Treevue组件上选中复选框时，数据都会更改。

非常感谢。

## FilterList.vue ##
export default {
  data() {
    return {
      listSelected: ['aa','bb','cc','...'],  // this value will mutate when user has selected checkbox
    }
  }
}

=================================================================
## store.js ##
export default new Vuex.Store({
  state = {
    dataSelected: [ ]
  },
  mutation = {
    FILTERSELECTED(state, payload) {
      state.selected = payload
    }
  },
  action = {
    hasSelected(context,param) {
      context.commit('FILTERSELECTED',param)
    }
  },
  getters = {
    getSelected: state => state.dataSelected,
  }
  
  strict: true
})

Answer 1

您可以设置strict: false并直接更改数据，但我不建议这样做。
您将失去Vuex提供的好处，而宁愿在Vuex之外共享该对象。

并非所有更改都需要与商店同步，这取决于场景。
以一个EditUser组件为例，我将从商店中的用户对象的深层副本开始：

this.tmpUser = JSON.parse(JSON.stringify(this.$store.state.user))

此tmpUser与商店断开连接，并且在更改其属性时不会生成警告（或更新）。
当用户按下“保存”按钮时，我会将更改后的对象发送回商店：

this.$store.dispatch("user/save", this.tmpUser)

更新了商店中的实例，并允许应用程序的其他部分查看更改。

我也只在需要异步（获取/保存数据）时才编写动作。对于同步操作，我只编写变体并使用mapMutations帮助程序或直接调用$store.commit("mutation")。

如何在VueX状态下直接设置值

1 个答案: