Vue.js/Vuex：如何将v-bind绑定到状态值？

Question

Vue.js/Vuex：如何将v-bind绑定到状态值？

4

我正在尝试将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绑定？

- mmjin

你介意和我们分享 getSelectedSearchType 的 getter 吗？ - Dawid Zbiński

@DawidZbiński，我已经编辑了我的问题，包括getter和state。 - mmjin

在组件中如何导入 store？ - ittus

我正在使用 import store from '../store/module' 导入存储。存储包含在 module.js 文件中。 - mmjin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Austio · Accepted Answer

你最好的绑定store的方法是创建一个计算的getter/setter，然后在输入中使用v-model。这将看起来像以下内容，你需要根据你的值进行一些调整。

这也假设在值改变时会发出一个输入。

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

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