javascript - Vue.js/Vuex : How do I v-bind to a state value?

Question

我正在尝试将 b-dropdown 元素中的文本绑定(bind)到商店中的值。我尝试绑定(bind)到一个计算属性，因为商店中的值可以更改并且 b-dropdown 的文本应该动态更改以反射(reflect)此更改。我想将该值存储在商店中而不是作为数据对象，因为该值必须在存在 b-dropdown 的组件之外保留。

这是 b-dropdown 元素:

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

和计算属性

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

setter/getter

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-dropdown 的文本绑定(bind)到商店中的 selectedSearchType？

Answer 1

绑定(bind)到商店的最佳选择是创建一个计算的 getter/setter，然后在您的输入中使用 v-model。这看起来像下面这样，您将不得不根据您的值进行一些调整。

这还假设 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
    }
  }
}