How to pass variable from Vuex store to a function as value?

Question

So I am working with what would appear to be a simple issue, but it is eluding me this evening. I have a value that is set in a Vuex store. In my component file, I declare a constant where the value is retrieved from the store. Everything up to this point works perfectly.

Then, upon submitting a form in the component a script function is run. Within that function, I need to pass the value from the Vuex store along with a couple of other arguments to another function. The function gets call, the arguments are passed, and it all works as expected.

However ... I am getting console errors stating ...

Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers.

What is the correct what to retrieve a value from the Vuex store and then pass that value to a function?

---

Some more detail here ... Page 1 stores an object representing a CognitoUser in the store using a mutation function which works as expected, then transitions to Page 2. Page 2 retrieves the object from the store (tried both the data and computed methods mentioned below as well as using the getter directly in the code - all fail the same). Within a method on Page 2, the object from the store is accessible. However, that method attempts to call the Amplify completeNewPassword method, passing the CongnitoUser object as an argument. This is the point that the error appears stating that the mutation handler should be used even though there is no change to the object on my end.

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

This is almost certainly a duplicate question. You can refer to my answer here.

Basically you should pass the Vuex value to a local data item and use that in your component function. Something like this.

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

Answer 2

The canonical way of handling this by using computed properties. You define a computed property with getter and setter and proxy access to vuex thru it.

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

Now you can use localProperty just as we use any other property defined on data. And all the changes get propagated thru the store.

Answer 3

Try if this work

<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>