Question

因此，我正在解决似乎很简单的问题，但是今天晚上它使我难以理解。我有一个在Vuex商店中设置的值。在我的组件文件中，我声明了一个常量，在该常量中可以从存储中检索值。到现在为止，一切都工作正常。

然后，在组件中提交表单后，将运行脚本功能。在该函数中，我需要将Vuex存储中的值与其他几个参数一起传递给另一个函数。该函数将被调用，参数将被传递，并且一切都能按预期工作。

但是...我收到控制台错误提示...

观看者“函数（）{返回this._data。$$ state}的回调中发生错误”：“错误：[vuex]不会在变异处理程序之外变异vuex存储状态。

从Vuex存储中检索值然后将该值传递给函数的正确方法是什么？

此处有更多详细信息...第1页使用表示预期功能的变异函数将表示CognitoUser的对象存储在商店中，然后转换到第2页。第2页从存储中检索对象（尝试了数据和下面提到的计算方法以及直接在代码中使用getter-都失败了）。在第2页的方法中，可以访问商店中的对象。但是，该方法尝试通过将CongnitoUser对象作为参数传递来调用Amplify completeNewPassword方法。这就是错误的出现，表明即使我的对象没有变化，也应该使用变异处理程序。

....
computed: {
    user: {
        get(){
            return this.$store.getters[ 'security/localUser' ]
        },
        set( value ){
            this.$store.commit( 'security/setLocalUser', value )
        }
    }
},
....
methods: {
    async submitForm(){
        this.$Amplify.Auth.completeNewPassword( this.user, this.model.password, this.requiredAttributes )
            .then( data => {
....

Answer 1

几乎可以肯定这是一个重复的问题。您可以参考我的答案here。

基本上，您应该将Vuex值传递给本地数据项，并在组件函数中使用它。像这样的东西。

<script>
export default {
  data: () => ({
    localDataItem: this.$store.getters.vuexItem,
  })
  methods: {
    doSomething() {
      use this.localDataItem.here
    }
  }
}
</script>

Answer 2

使用计算属性处理此问题的规范方法。您可以使用getter和setter以及通过vuex对其进行代理访问来定义计算属性。

computed: {
     localProperty: {
        get: function () {
            return this.$store.getters.data
         },
        set: function (val) {
            this.$store.commit(“mutationName”, val )
        }
     }
 }

现在，您可以使用 localProperty ，就像我们使用在数据上定义的任何其他属性一样。并且所有更改都将通过商店传播。

Answer 3

尝试这项工作

<template>
  <div>
    <input :value="user" @change="onChangeUser($event.target.value)"></input>
  </div>
</template>

<script>

computed: {
    user() {
      return this.$store.getters[ 'security/localUser' ]
    }
},
methods: {
  onChangeUser(user) {
    this.$store.commit( 'security/setLocalUser', user );
  },
   async submitForm(){
      this.$Amplify.Auth.completeNewPassword( this.user, this.model.password, this.requiredAttributes )
        .then( data => {
        ...

}
</script>

如何将变量从Vuex存储传递给函数作为值？

3 个答案: