Vue.js / Vuex: Как мне привязать v-значение к значению состояния?

Question

Я пытаюсь привязать текст в элементе b-dropdown к значению в магазине.Я попытался привязать к вычисляемому свойству, так как значение в хранилище может измениться, и текст b-раскрывающегося списка должен динамически измениться, чтобы отразить это изменение.Я хочу хранить значение в хранилище, а не как объект данных, потому что значение должно сохраняться за пределами компонента, где существует b-раскрывающийся список.

Вот элемент b-выпадающего списка:

<b-dropdown v-bind:text="selectedSearchType" variant="outline-secondary">
  ...
</b-dropdown>

И вычисляемое свойство

computed: {
  selectedSearchType: function() {
    return store.getters.getSelectedSearchType
  }
},

Получатель

getSelectedSearchType: state => {
  return state.selectedSearchType
}

Состояние

state: {
 selectedSearchType: "Item",
 .....
}

Я получаю следующую ошибку:

[Vue warn]: Invalid prop: type check failed for prop "text". Expected String, got Function.

Вместо этого я получаю

<b-dropdown v-bind:text="selectedSearchType()" variant="outline-secondary">

Я получаю

[Vue warn]: Error in render: "TypeError: Cannot read property 'selectedSearchType' of undefined"

Как сделатьЯ исправляю это, чтобы текст b-выпадающего меню привязывался к selectedSearchType в магазине?

Answer 1

Ваша лучшая ставка на привязку к магазину - создать вычисляемый геттер / сеттер, а затем использовать v-модель в качестве входных данных.Это будет выглядеть примерно так: вам придется немного подстроиться в зависимости от ваших значений.

Это также предполагает, что b-dropdown будет излучать вход при изменении значения.

<b-dropdown v-model="selectedSearchType" variant="outline-secondary">

computed: {
  selectedSearchType: {
    get() { 
      return //value from store 
    },
    set(val) {
      // set the value in the store
    }
  }
}