Vuex mapState 设置状态

Question

在我的商店里，我有...

...
  addresses: [ /* array of address objects */ ],
  address: { /* holds chosen address */ }
...

在我的组件中，我有...

    import {mapState, mapActions} from 'vuex'

      export default {
        name: 'AddressBook',
        watch: {
          selectedAddress: function(newval) {
            // Update the address
            // address and addresses is mapped from the vuex store.
            this.address = Object.assign( this.address, this.addresses[newval]);
          }
        },
        data: {
          selectedAddress: 0 /* Address selected by index */
        }
        computed: {
          ...mapState(['addresses', 'address'])
        }
      }

地址和地址是从 vuex 映射的。 用户从地址选择框中选择一个地址（例如地址[1]）...用于更新地址。

让我感到困惑的是，以这种方式更新 this.address 是可行的……我的 Vuex 商店发生了变化。我以为我必须派遣/提交等..？这似乎太简单了..太容易了..

在组件级别以这种方式更新 this.address 是否安全？

Answer 1

在组件级别以这种方式更新 this.address 是否安全？

不，至少您应该从突变提交更改（或调用提交突变的操作）。来自Mutations documentation：

在 Vuex 存储中实际更改状态的唯一方法是提交突变。

另外，您修改地址的方式可能不会像您想象的那样发生：

this.address = Object.assign( this.address, this.addresses[newval]);

无论如何，重新分配这样的计算属性是荒谬的（可能是不可能的？不确定 Vue 是否冻结）。实际发生的是Object.assign 总是直接改变第一个参数。这就是为什么您可能经常看到空对象模式，例如Object.assign({}, this.address, this.addresses[newval])

无论如何，为避免此类微妙的意外突变，您可以启用strict mode，它会在发生这些不安全的突变时向您发出警告。