Vue.js/Vuex：我如何 v-bind 到一个状态值？

Question

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

这是 b-dropdown 元素：

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

Answer 1

绑定到 store 的最佳选择是创建一个计算的 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
    }
  }
}