Vue-Multiselect和Vuex：已预先选择商店中的值

Question

想象一个带有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>

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

values: ["test"]

multiselect-下拉菜单具有“ test”作为已选择选项。 我也可以在单击时取消选择它，然后再次选择它，因为它处于选项中。

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

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

它不能完全正常工作。 在选择区域/下拉搜索字段中，通常会显示带有所选项目名称的绿色框。 对我来说，它不会在绿色框中显示字符串 ，该字符串位于this。$ store.state.variableIwantPreselected中 ，但是通常 只有一个小的绿色框​​，其中没有任何内容 。

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

Answer 1

如果您使用Vuex来处理在存储使用状态下的数据的最佳方法，
变异，动作和获取方法来获取任何类型的数据。 有关更多信息，请查看此帖子

Answer 2

对于遇到类似问题的人们的进一步说明：检查，何时渲染/加载组件。 就我而言，它是在更改商店中的值之前加载的（倾向于在使用vue-router时发生，并且只有一个路由显示多个组件）。

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

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

在数据中：

values: []

在方法中：

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

在update（）中：

this.checkValues()