Vue 状态未使用默认注入值更新

Question

如果单击该按钮，您可以在控制台中看到 state 的值已更新，但在页面输出中并未更新。如何使其与默认注入值一起使用？

const Component = {
  inject: {
    state: {
      default: () => ({
        example: 1
      })
    }
  },
  template: `<div>
    <div>{{ state }}</div>
    <button @click="click">click</button>
  </div>`,
  methods: {
    click() {
      this.state.example += 1
      console.log(this.state)
    }
  }
}

new Vue({
  el: "#app",
  components: {
    Component
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component></component>
</div>

它是否与 Vue 文档所说的“注意：提供和注入绑定不是反应性的。这是故意的。但是，如果您传递一个观察到的对象，该对象上的属性确实保持反应性。”？我对 BINDINGS 不是反应性但 OBSERVED OBJECT 是反应性之间的区别感到困惑。你能举个例子来演示一下区别吗？

Answer 1

抱歉，不清楚您想要什么 - “注入”的提供者在哪里？为什么在使用值本身的同一组件中使用 inject？

这是你的代码，没有inject：

1。使用数据属性

const Component = {
  data() {
    return {
      state: {
        example: 1
      }
    }
  },
  template: `<div>
    <div>{{ state }}</div>
    <button @click="click">click</button>
  </div>`,
  methods: {
    click() {
      this.state.example += 1
      console.log(this.state)
    }
  }
}

new Vue({
  el: "#app",
  components: {
    Component
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component></component>
</div>

只需使用 data 属性 - 您可以为 example 设置默认值。

2。使用注入离子

inject 是完全不同的东西 - 它是一种将值从 provider 传递给 consumer 的方法：

const Component = {
  inject: ['state1'],
  data() {
    return {
      state: {
        example: 1
      }
    }
  },
  template: `<div>
    <div>injected: {{ state1 }}</div>
    <div>{{ state }}</div>
    <button @click="click">click</button>
  </div>`,
  methods: {
    click() {
      this.state.example += 1
      console.log(this.state)
    }
  }
}

new Vue({
  el: "#app",
  provide: {
    state1: {
      example1: 1
    }
  },
  components: {
    Component
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component></component>
</div>

您可以“跳过”组件级别并在您注入它的组件中使用 provided 值 - 您不必将它一路向下传递道具。

3。创建反应性 inection

如果你想要反应式注入，那么你需要传递一些更复杂的东西：

const Component1 = {
  inject: ['state2'],
  data() {
    return {
      state: {
        example: 1
      }
    }
  },
  template: `<div>
    <div>injected: {{ state2.state2P }}</div>
    <div>{{ state }}</div>
    <button @click="click">click</button>
  </div>`,
  methods: {
    click() {
      this.state.example += 1
      console.log(this.state)
    }
  }
}

new Vue({
  el: "#app",
  data() {
    return {
      state2: {
        example2: 1
      }
    }
  },
  provide() {
    // create an object (state2)
    const state2 = {}
    // define a property on the object (state2P), that
    // has a get() function that always gets the provider's
    // value you want to inject
    Object.defineProperty(state2, 'state2P', {
      enumerable: true,
      get: () => this.state2,
    })
    // return the created object (with a property that always
    // gets the value in the parent)
    return {
      state2
    }
  },
  components: {
    Component1
  },
  methods: {
    parentClick() {
      this.state2.example2 += 1
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component1></component1>
  <button @click="parentClick">PARENT CLICK</button>
</div>

我在模板中添加了一个按钮，因此您可以看到在提供者组件范围内定义的method 更改了在消费者组件范围内显示的值。 （还必须更改组件的名称，因为 Vue 开始“抱怨”使用受限词。）