从 vuejs 组件观察 vuex 状态变化答案

【问题标题】：Watching vuex state change from vuejs component从 vuejs 组件观察 vuex 状态变化
【发布时间】：2018-01-20 10:17:02
【问题描述】：

我是 vue.js 和 vuex 的新手。我有一个组件需要在状态中有特定数据时调度一个动作。我该怎么做。

例子：

export default {
   name: 'MyComponent',
   computed: {
      targetItem() {
         return this.$store.getters.getTarget(this.$route.params.id);
      }
   }
}

在上面的示例中，当targetItem 具有值时，我想在商店中调度一个新操作。这样我就可以通过 vuex 操作触发 ajax 请求，以收集更多关于 targetItem 的数据

谢谢

【问题讨论】：

您已经尝试过哪些操作，哪些操作没有达到您的预期？
您的用例对我来说非常不清楚。您是否正在寻找类似 @987654321@ 的内容？请在您的问题中添加更多详细信息。你打算用这个动作做什么？它是否发送 ajax 请求，是否更改状态等？

标签： vue.js vuex

【解决方案1】：

我最终找到了一个可行的解决方案

export default {
   name: 'MyComponent',
   computed: {
      targetItem() {
         return this.$store.getters.getTarget(this.$route.params.id);
     }
   },
   watch: {
      shop (newVal, oldVal) {
         if(!!newVal && !oldVal) {
            const {targetItem} = this;           
            this.$store.dispatch('ACTION_NAME',{targetItem});
         }
      }
   }
}

谢谢

【讨论】：