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文档所说的“注：提供和注入绑定不是反应性的。这是有意的。但是，如果您向下传递观察到的对象，该对象的属性的确会保持反应性。”我对绑定不是反应性但观察对象是反应性之间的区别感到困惑。您可以举个例子来演示差异吗？

Answer 1

对不起，但您不清楚要做什么-“注入”的提供者在哪里？为什么在与使用值本身相同的组件中使用注入？

这是您的代码，没有注入：

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。使用注入离子

注入是完全不同的-这是一种将值从提供者传递给消费者的方式：

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>

您可以“跳过”组件的级别，并在注入的组件中使用提供的值-您不必像以前那样完全传递道具。

3。创建反应性昆虫离子

如果要进行反应性注射，则需要传递更复杂的内容：

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开始“抱怨”使用受限词。）

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

1 个答案:

1。使用数据属性

2。使用注入离子

3。创建反应性昆虫离子