在组件方法()中访问Vuex $store.getters

Question

我正在尝试使用 Vuex 和 Vuetify 作为搜索框异步填充下拉列表 (https://vuetifyjs.com/components/selects)。我的问题是我无法使用 method() 访问 $store，当然只能使用 computed()。

这是我的 getters/state:

loadedTours:Array[9]
0:Object
1:Object
2:Object
3:Object
4:Object
5:Object
6:Object
7:Object
8:Object
9:Object

可以使用来自 computed()

的 v-for 编辑 return

tours () {
    return this.$store.getters.loadedTours
},

这是一个仅当列表在数据中时才有效的方法():

methods: {
    querySelections (v) {
        this.loading = true
            setTimeout(() => {
                this.items = this.tours.filter(e => {
                    return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
                })
            this.loading = false
        }, 500)
    }
}

结果应该 return 每个 object 中列出的旅游标题。

当前解决方案：

已添加 created():

created () {
    this.loadedTours = this.$store.getters.loadedTours
},

将 method() 更改为：

querySelections (v) {
    let that = this; 
    setTimeout(() => {
        that.items = that.loadedTours
    }, 500)
}

删除了数据属性处的箭头函数。

现在需要 return 旅游标题，然后按输入过滤。

Answer 1

除了我在评论中提到的，你的主要错误可能是因为你在箭头函数内部使用 this，因为 this 不会引用正确的（vuejs）上下文,

来自documentation：

Note that you should not use an arrow function with the data property (e.g. data: () => { return { a: this.myProp }}). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.myProp will be undefined.

而是做这样的事情：

  let that = this; 
  setTimeout(() => callback(that.name), 15);

现在，that将引用使用vuejs this对象

在组件方法()中访问Vuex $store.getters

Access Vuex $store.getters in component method()

javascript

vuejs2

vuex