Проксирование данных через геттеры в вычисляемые св-ва(v-model)

Question

Есть следующий код, при работе с v-model и html тегами <input type="text">:

<template>
  <InputTextApp class="inputTextAdditionData" placeholder_text="" v-model="cell_phone_number">
  </InputTextApp>
</template>


<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{

  data () {
    return {
      loading_cell_phone_number: '',
    }
  },

  computed: {
    cell_phone_number: {
      get () {
        return this.loading_cell_phone_number;
      },
      set (value) {
        this.loading_cell_phone_number = value;
      }
    },
}
</script>

Вопрос:
Если в содержимом вычисляемых св-в необходимо иметь в наличии вышеуказанный код, каким образом я должен проксировать данные из геттеров что бы с эмитировать работу данного кода?

В качестве примитивного теста я попробовал сделать нечто подобное:

// vuex хранилище: tracker.js
const axios = require("axios");

export const getters = {
  
  personTypeInput3: (state) => {
      
    return {index: {
      get () {
        return this.loading_cell_phone_number;
      },
      set (value) {
        this.loading_cell_phone_number = value;
      }
    },
  }}
  
};


<template>
  <InputTextApp class="inputTextAdditionData" placeholder_text="" v-model="cell_phone_number">
  </InputTextApp>
</template>


<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{

  data () {
    return {
      loading_cell_phone_number: '',
    }
  },

  computed: {
    cell_phone_number: {
    ...mapGetters("tracker", [
    "personTypeInput3",
    // Here you can import other getters from the products.js
  ])
}
</script>

После чего принял код содержимого в вычисляемом св-ве следующего вида:

Что необходимо прописать в геттере хранилища что бы на выходе в вычисляемом св-ве получить код, который указан в самой первой реализации(в начале поста)?
(что то вроде этого:)

Answer 1

Какой огромный вопрос, от одного чтения мозги устали.

Тут немного не верно используются v-model и computed. Вычисляемые свойства - это как правило функции, которые считаются один раз при вызове, если хотя бы одна из зависимостей была обновлена, а новое значение не было вычислено. Морочиться о том, где вычисляемое свойство хранит результат, не нужно, ибо оно сделает это автоматически.

v-model - это директива, которая применяется чаще всего на элементах ввода. Допустим имеется следующий код:

<template>
  <MyInput/>
</template>

<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{
    data () {
      return {
        phoneNumber: ''
      }
    }
  }
</script>

, и нам необходимо выполнить двустороннее связывание phoneNumber и MyInput. Можно сделать это так:

<MyInput
  :value="phoneNumber"
  @input="setPhoneNumberFn"
/>

, а можно вот так:

<MyInput
  v-model="phoneNumber"
/>

v-model - это просто короткая запись первого варианта. Заметьте, что вычисляемое свойство, тем более такое мудрёное, здесь не нужно.

БЛОГ НА HUSL

Проксирование данных через геттеры в вычисляемые св-ва(v-model)

Ответы (1 шт):