VueX ждать мутации для выполнения - PullRequest
Новая
       44

VueX ждать мутации для выполнения

0 голосов
/ 28 апреля 2020

Возможно ли в VueX заставить метод в mounted() ждать, пока не будет выполнена какая-либо мутация в другом компоненте?

Потому что иногда эта мутация выполняется до, а иногда и после, поэтому я бы знал, будет ли она можно дождаться его запуска после монтирования компонента: 

  mounted() {
    // await MutationName
    this.columnItemsInit();
  }

Ответы [ 3 ]

2 голосов
/ 30 апреля 2020

Вы можете подписаться на мутации с помощью store.subscribe method 

mounted() {
  let unsubscribe = null
  unsubscribe = this.$store.subscribe(({ type }) => {
    if (type === 'MutationName') {
      this.columnItemsInit()
      unsubscribe() // So it only reacts once.
    }
  })
}
0 голосов
/ 29 апреля 2020

Правильный подход для этого - использовать действия vuex. Характер действия должен быть асинхронным, поэтому, когда вы выполняете действие, вы можете установить ожидание его возникновения.

Как указано в документации

Действия похожи на мутации, различия в том, что:

  • Вместо того, чтобы изменять состояние, действия совершают мутации.
  • Действия могут содержать произвольные асинхронные операции.

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

Например: 

const store = new Vuex.Store({
    state: {
        token: null
    },
    mutations: {
        SET_TOKEN (state, payload) {
          state.token = payload
        }
      },
      actions: {
        SET_TOKEN ({ context }, token) {
          context.commit('SET_TOKEN', token)
        }
      }
})

После этого в ваших методах / ловушках просто вызывается действие через диспетчеризацию method. 

methods: {
    async refreshStoreValue() {
        await this.$store.dispatch('SET_TOKEN', token) //this will call an action declared in your store.
    }
}

Вы можете использовать этот оператор внутри объявления метода asyn c или внутри хуков жизненного цикла (создан, смонтирован и т. д. c).

0 голосов
/ 28 апреля 2020

Если компоненты не связаны каким-либо образом (от родителя к ребенку), это может быть сложно. Вы могли бы добавить наблюдатель к вычисляемому свойству в вашем конечном компоненте, который просматривает значение (например, с именем «alpha») в хранилище, которое можно обновить после завершения работы первого компонента. Итак

Компонент 1 

mounted() {
    // Run function then update state value "alpha" in store to say I am complete
}

Компонент 2 

computed {
    valueInStore() {
        // return state value "alpha"
    }
},

watch: {
    valueInStore(value) {
        // If value "alpha" is complete run the following code
        this.columnItemsInit();
    }
}
...