观察者不使用 Vuex答案

【问题标题】：Watcher not working with Vuex观察者不使用 Vuex
【发布时间】：2018-12-30 22:11:29
【问题描述】：

我遇到了一个问题，即我的组件中的数据更改时没有触发观察者。数据中的属性是反应性的，因为它是在组件创建时设置的，而不是稍后设置的。

这是一段代码，其中的问题是：

https://codesandbox.io/s/nlpvz0y6m

为了更详细地解释，status 属性从父级获取其状态，实习生从 Vuex 状态对象获取它，它被成功传递给组件，因为我能够记录并更改它。

但是，当我设置一个观察者时，在它的值发生变化时执行一个函数，它根本不会触发。无论我如何进行更改 - 无论是使用组件的内部方法还是事件。

我需要的是观察者在状态属性更改时触发，但不确定为什么它根本不反映它。

结构如下：BottomBar 是父组件，一个 bool 值作为属性传递给 Spin.vue 作为 prop，然后将 prop 分配给子组件上的 data 属性。

bool 值本身来自 Vuex 实例所在的 index.js。

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

在控制台显示以下两个错误

[vuex] unknown getter: isSpinning
[vuex] unknown mutation type: spinIt

问题似乎在于商店的设置方式。试试这个。

export const store = new Vuex.Store({
  state: {
    controls: {
      spin: false
    }
  },
  getters: {
    isSpinning: state => {
      return state.controls.spin;
    }
  },
  mutations: {
    spinIt(state) {
      return (state.controls.spin = !state.controls.spin);
    }
  }
});

【讨论】：

【解决方案2】：

你有你的突变和吸气剂坐在你的状态。我已将它们移到外面，并更新了里面的引用以使代码按预期工作。

https://codesandbox.io/s/8xyxmvr8jj

【讨论】：