观察者无法使用Vuex

时间:2018-07-23 12:42:38

标签: javascript vue.js vuex

我遇到一个问题,即组件中的数据更改后没有触发监视程序。数据中的属性是反应性的,因为它是在创建组件时设置的,以后不再设置。

这是一段代码,其中的问题是:

https://codesandbox.io/s/nlpvz0y6m

为了更详细地解释,status属性从父级获取其状态,而intern属性从Vuex状态对象获取其状态,因为我能够对其进行记录和更改,所以它已成功传递给组件。

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

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

结构如下:BottomBar是父级,将布尔值作为属性作为属性传递给Spin.vue,然后将该属性分配给子组件上的data属性。

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

2 个答案:

答案 0 :(得分:3)

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

[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);
    }
  }
});

答案 1 :(得分:0)

您的变异和吸气剂坐在您的州内。我将它们移到了外面,并更新了里面的引用以使代码按预期工作。

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