Vuex mapState设置状态

Posted 2021-04-06

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

...
  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是否安全？

答案

以这种方式在组件级别更新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，它会在发生那些不安全的突变时发出警告。