Vue состояние не обновляется с введенным значением по умолчанию - PullRequest
Новая
       19

Vue состояние не обновляется с введенным значением по умолчанию

1 голос
/ 30 апреля 2020

Если вы нажмете кнопку, вы увидите, что значение 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 документы говорят: «Примечание: привязки подачи и ввода НЕ являются реактивными. Это сделано намеренно. Однако, если вы передадите наблюдаемый объект, свойства этого объекта остаются реактивными. " Я смущен различием между связыванием, не являющимся реактивным, но НАБЛЮДАЕМЫЙ ОБЪЕКТ, являющийся реактивным. Не могли бы вы показать пример, чтобы продемонстрировать разницу?

1 Ответ

0 голосов
/ 30 апреля 2020

Извините, но не понятно, что вы хотите - где находится поставщик для "инъекции"? Почему вы используете inject в том же компоненте, что и само значение?

Вот ваш код без inject :

1. Используйте атрибут data 

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 ion

inject - это нечто совершенно другое - это способ передачи значений от поставщика к потребителю : 

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>

Вы можете "пропустить" уровни компонентов и использовать значение при условии в компонентах, куда вы вводите it - Вам не нужно проходить все это вниз как реквизит .

3. Создайте реактивный inect ion

Если вы хотите сделать реактивный инъекцию , вам нужно передать что-то более сложное: 

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 начал «скулить» об использовании ограниченного слова.)

...