vue.js - Vuex:如何从商店更新组件数据或调用组件方法

Question

如果我有商店:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    foo: bar
  },
  mutations: {
    updateComponent (state) {
      // computation and logic
      // update state
      this.$refs.myComponent.updateComponent(state.foo)
    }
  }
}

我有一个带有引用'myComponent'的组件:

<template>
  ...
</template>
<script>
  export default {
    ...
    methods: {
      updateComponent(payload) {
        // do stuff
      }
    }
  }
</script>

我想从商店中调用“updateComponent()”方法。我可以从其他 View 和组件中使用 this.$refs.myComponent，但是在Store中无法使用。我收到错误 TypeError: Cannot read property 'myComponent' of undefined。

显然，从商店使用 this并不是 this.$refs.myComponent的正确范围。

我可以从商店变异中调用 updateComponent()吗？如何调用？

Answer 1

您可以使用vuex的subscription方法。在安装阶段订阅您的组件:

mounted() {
    this.$store.subscribe((mutation, state) => {
        switch(mutation.type) {
          case 'updateComponent':
            // Update your component with new state data
          break;
        } 
     })
  }

引用: https://vuex.vuejs.org/api/#subscribe