Vue.js Vuex 如何正确使用 store.watch() 方法？答案

【问题标题】：Vue.js Vuex how to use correctly the store.watch() method correctly?Vue.js Vuex 如何正确使用 store.watch() 方法？
【发布时间】：2018-11-28 15:33:34
【问题描述】：

我阅读了有关 store.watch() 的信息，但找不到有效的示例...

Vuex 手表观看（fn：函数，回调：函数，选项？：对象）：函数响应式观察 fn 的返回值，并在值变化时调用回调。 fn 接收 store 的状态作为第一个参数，getter 作为第二个参数。接受一个可选的选项对象，该对象采用与 Vue 的 vm.$watch 方法相同的选项。要停止观看，请调用返回的 unwatch 函数。

我有一个用户使用 Firebase 登录的 Vuex 操作

signUserIn ({commit}, payload) {
  commit(types.SET_LOADING, true)
  commit(types.CLEAR_ERROR)
  firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
  .then((user) => {
    commit(types.SET_LOADING, false)
    const newUser = { id: user.uid, name: user.displayName, email: user.email, photoUrl: user.photoURL }
    commit(types.SET_USER, newUser)
  })
  .catch((error) => {
    commit(types.SET_LOADING, false)
    commit(types.SET_ERROR, error)
  })
},

我正在从我的 Signin vue 组件调度此操作

在我的业务案例中，由于用户尚未注册，因此登录失败，因此会引发错误并在商店中提交但在我的组件中，我没有在调度后立即抓住错误所以我在商店中有一个加载值设置为真/假我需要观察它的变化......所以我尝试使用 store.watch()

onSignIn 方法（验证后）

    this.$store.dispatch('signUserIn', { email: this.email, password: this.password })
      console.log('loading...: ', this.$store.getters.loading)
      this.$store.watch(this.$store.getters.loading, () => {
        console.log('loaded')
        console.log('onSIgnin error', this.error.code)
      })

但我得到了 Vuex 错误

 Error: [vuex] store.watch only accepts a function

我正在传递一个函数，不是吗？

感谢反馈

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

watch 的第一个参数是一个函数，它接收状态作为第一个参数，getter 作为第二个参数。所以像这样访问getter，返回值就是被监视的那个。

      this.$store.watch((state, getters) => getters.loading, () => {
        console.log('loaded')
        console.log('onSIgnin error', this.error.code)
      })

【讨论】：