Как передать переменную из хранилища Vuex в функцию в качестве значения?

Question

Так что я работаю с тем, что кажется простым делом, но оно ускользает от меня этим вечером.У меня есть значение, установленное в магазине Vuex.В моем файле компонента я объявляю константу, где значение извлекается из хранилища.Все до этого момента работает отлично.

Затем при отправке формы в компонент запускается функция скрипта.В этой функции мне нужно передать значение из хранилища Vuex вместе с парой других аргументов в другую функцию.Функция получает вызов, аргументы передаются, и все работает как ожидалось.

Однако ... Я получаю консольные ошибки, утверждающие ...

Ошибка в обратном вызове для наблюдателя "() {return this._data. $$ state} ":" Ошибка: [vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций.

Как правильно извлечь значение из хранилища Vuex, а затемпередать это значение функции?

---

Более подробно здесь ... Страница 1 хранит объект, представляющий CognitoUser, в хранилище, используя функцию мутации, которая работает, как и ожидалось, затем переходит на страницу 2. Страница2 извлекает объект из хранилища (пробовал как данные, так и вычисленные методы, упомянутые ниже, а также используя получатель непосредственно в коде - все терпят неудачу одинаково). В методе на странице 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 => {
....

Answer 1

Канонический способ обработки этого с использованием вычисляемых свойств .Вы определяете вычисляемое свойство с помощью getter, setter и proxy-доступа к vuex через него.

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

Теперь вы можете использовать localProperty так же, как мы используем любое другое свойство, определенное в данных.И все изменения распространяются через магазин.

Answer 2

Попробуйте, если эта работа

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

Answer 3

Это почти наверняка дублирующий вопрос.Вы можете сослаться на мой ответ здесь .

По сути, вы должны передать значение Vuex локальному элементу данных и использовать его в функции компонента.Как то так.

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