javascript - 如何从全局对象自动更新 vuejs 模型中的数据？

Question

这是我使用 vuejs 的第一个项目，我遇到了来自全局对象的自动更新数据的问题。在我的项目中，我使用的是 es6 和 vuejs。

我需要禁用/启用按钮，当我将全局对象中的禁用选项更改为 false 按钮​​时，该按钮未启用。

这是简单的 fiddle https://fiddle.jshell.net/daer/nsk95tez/

当我单击“更改状态”时，state.disabled 变为 false 但按钮未启用 :(

<div id="some">
  <p>Current state: {{disabled}}</p>
  <button type="button" v-bind:disabled="disabled">Button</button>
</div>
<br>
<button id="state" type="button" v-on:click="changeState">Change state</button>

class stateList {
    constructor() {
        this.disabled = true;
    }
};
// export default (new stateList);


// import state from '../state/';
var state = new stateList;

var some = new Vue({
  el: '#some',
  data: {
    disabled: state.disabled
  },
  methods: {
    methodOne: function(e) {
      // ...
    }
  }
});

var changeState = new Vue({
  el: '#state',
  methods: {
    changeState: function(e) {
      state.disabled = false;
      alert(state.disabled);
    }
  }
});

Answer 1

问题是你实际上并没有改变变量 data.disabled 所以按钮状态没有改变。您正在创建一个数据对象和一个状态对象，并在创建 Vue 实例时在它们之间复制一个值 data.disabled=state.disabled (您实际上并没有传递对变量的引用，只是变量本身).您需要将状态对象设置为数据对象。

el: '#some',
data: state,
methods: {

https://fiddle.jshell.net/nsk95tez/2/

但是你真的不需要 es6 类来存储状态。 Vue.js 的关键部分之一是数据变量是一个简单的对象。 Es6 类是用于创建在这种情况下不需要的具有继承性的对象的语法糖。

试试这个

var state = {disable:true};

https://fiddle.jshell.net/nsk95tez/1/这是修改后的 js fiddle 示例。