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

因此，我正在处理一个看似简单的问题，但今晚我却无法解决。我有一个在Vuex存储中设置的值。在我的组件文件中，我声明了一个常量，从存储中检索该值。到目前为止，一切都很完美

然后，在组件中提交表单后，将运行脚本函数。在该函数中，我需要将Vuex存储区中的值以及几个其他参数传递给另一个函数。函数得到调用，参数被传递，并且一切正常

然而。。。我得到控制台错误说明

观察程序“function（）{返回此._data.$$state}”的回调出错：“错误：[vuex]不要在变异处理程序之外变异vuex存储状态

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

---

这里有更多的细节…第1页使用一个工作正常的变异函数在存储中存储一个代表CognitoUser的对象，然后转换到第2页。第2页从存储中检索该对象（尝试了下面提到的数据和计算方法，以及在代码中直接使用getter-都失败了）。在第2页的方法中，可以访问存储区中的对象。但是，该方法尝试调用Amplify completeNewPassword方法，将CongnitoUser对象作为参数传递。这就是出现错误的原因，指出即使我端的对象没有更改，也应使用变异处理程序

....
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 => {
....

---

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

基本上，您应该将Vuex值传递给本地数据项，并在组件函数中使用它

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

导出默认值{
数据：（）=>({
localDataItem:this.$store.getters.vuexItem，
})
方法：{
doSomething（）{
使用this.localDataItem.here
}
}
}

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

基本上，您应该将Vuex值传递给本地数据项，并在组件函数中使用它

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

导出默认值{
数据：（）=>({
localDataItem:this.$store.getters.vuexItem，
})
方法：{
doSomething（）{
使用this.localDataItem.here
}
}
}

通过使用计算属性来处理此问题的规范方法。使用getter和setter定义计算属性，并通过代理访问vuex

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

---

现在，您可以像使用在数据上定义的任何其他属性一样使用localProperty。所有更改都会通过存储进行传播。

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

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

现在，您可以使用localProperty，就像我们使用在数据上定义的任何其他属性一样。所有更改都会通过存储进行传播。

如果可行，请尝试

计算：{
用户（）{
返回此。$store.getters['security/localUser']
}
},
方法：{
onChangeUser（用户）{
此.store.commit（'security/setLocalUser'，user）；
},
异步提交表单（）{
this.$Amplify.Auth.completeNewPassword（this.user、this.model.password、this.requiredAttributes）
。然后（数据=>{
...
}

如果此操作有效，请尝试

计算：{
用户（）{
返回此。$store.getters['security/localUser']
}
},
方法：{
onChangeUser（用户）{
此.store.commit（'security/setLocalUser'，user）；
},
异步提交表单（）{
this.$Amplify.Auth.completeNewPassword（this.user、this.model.password、this.requiredAttributes）
。然后（数据=>{
...
}

你能在需要

Vuex

存储和变异代码的地方共享函数吗？只是添加了更多细节和代码，希望这能更好地解释问题。你能在需要

Vuex

存储和变异代码的地方共享函数吗？只是添加了更多细节和代码，希望这能解释问题a b更好。这是我第一次尝试，我仍然会遇到错误。我可以在页面中的方法中访问localProperty值，但是当我尝试将该值传递给AWS Amplify库上的另一个函数时，错误就会出现。我在上面的问题中添加了一些额外的代码，希望能够更好地解释。这是我的第一次尝试t尝试，我仍然遇到错误。我可以在页面中的方法中访问localProperty值，但是当我尝试并将该值传递给AWS Amplify库中的另一个函数时，就会出现错误。我在上面的问题中添加了一些额外的代码，希望能够更好地解释。我尝试了用它代替computed property声明，但结果似乎仍然相同。我可以在页面中的方法中访问localDataItem值，但在尝试将该值传递给AWS Amplify库上的另一个函数时，会出现错误。我在上面的问题中添加了一些额外的代码，希望能够更好地解释。@Jeff这可能会发生因为Amplify可以对传递给它的值进行变异。也许您可以使用如下扩展运算符克隆该项：$Amplify.Auth.completeNewPassword（…this.user等或甚至是此

this.$Amplify.Auth.completeNewPassword（JSON.parse（JSON.stringify（this.user）），etc

我尝试使用此方法代替计算属性声明，但结果似乎仍然相同。我可以在页面中的方法中访问localDataItem值，但在尝试将该值传递给AWS Amplify库上的另一个函数时会出现错误。我在上面的问题中添加了一些额外的代码，这将希望能解释得更好。@Jeff这可能是因为