Vue-Multiselect和Vuex:具有存储预选值

Question

想象一下Vuejs- Vuex的应用程序。我想要一个多选择的下拉列表。Vue组件中的基本示例：

<template>
  <div>
    <multiselect
      v-model="values"
      :options="options">
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        values: null,
        options: ['bar', 'foo', 'hello','test']
      }
    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

现在，如果我在这样的数据中初始化“值”：

values: ["test"]

多重选择下拉列表中已经选择了"test“选项。我也可以取消选择点击，并再次选择它，因为它在选项中。

如果我试图像这样初始化我的值：

values:[this.$store.state.variableIwantPreselected]

它不能完全发挥作用。在“选择区域/下拉搜索”字段中，通常会显示具有所选项目名称的绿色框。对我来说，它没有在绿色框( this.$store.state.variableIwantPreselected，中的)中显示字符串，而只显示一个小的绿色框，里面没有写任何东西。

我想我错过了一些关于Vuex和生命周期挂钩的东西，但是我不知道是什么。

Answer 1

如果您使用Vuex (在存储使用状态下操作数据的最佳方法)，

获取任何类型数据的突变、操作和获取器。有关更多信息，请查看这个职位

Answer 2

对于遇到类似问题的人员，还有一个注意事项:检查组件何时呈现/加载。在我的例子中，它是在存储中的值被更改之前加载的(当您使用vue-路由器并且只有一个路由显示多个组件时，往往会发生这种情况)。

解决方案:深入了解更新的生命周期挂钩。

我现在在更新的生命周期挂钩中调用一个函数。函数是在方法中声明的。函数检查我的值(现在初始化为空列表)是否长度为0。如果是，则将存储值推送到列表中。

在数据方面：

values: []

在方法上：

checkValues (){
    if(this.values.length === 0){
        this.values.push(this.$store.state.variableIwantPreselected)
    }
}

在更新()中：

this.checkValues()