Javascript Vue Multiselect和Vuex:具有来自存储区的预选值

设想一个带有Vuex的Vuejs应用程序。我想要一个mulitselect下拉列表。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>

multiselect下拉列表中已选择“测试”选项。我也可以在单击时取消选择它，然后再次选择它，因为它位于选项中

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

values: ["test"]

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

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

---

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

如果使用Vuex是在存储使用状态下操作数据的最佳方式，

---

突变、操作和getter以获取任何类型的数据。有关更多信息，请查看遇到类似问题的人员的进一步注意事项：在呈现/加载组件时进行检查。在我的例子中，它是在存储区中的值更改之前加载的（当您使用vue路由器并且只有一条路由显示多个组件时，往往会发生这种情况）

解决方案：深入研究更新的生命周期挂钩

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

在数据方面：

values: []

在方法上：

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

在updated（）中：

---

您确定此.$store.state.variableIwantPreselected包含一个字符串数组值吗？您是否尝试使用console.log（this.$store.state.variableIwantPreselected）来测试它？我刚刚做了。值是一个字符串，它位于存储区中。但是，如果我将variableIwantPreselected设置为一个包含一个字符串的数组，它将在绿色vue multiselect框中显示为[“variableIwantPreselected”]。我需要一个对象而不是字符串吗？我不想操纵存储。我想从中获取一个值，以在其值中使用预选值初始化multiselect。该值来自存储器，但未更改。所以，我需要一个值的getter，但我不能使用值本身？是的。您的存储中需要一个getter。在某些情况下，access直接工作，在这种情况下（使用数组）似乎不工作

this.checkValues()