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"：

values: ["test"]

multiselect-下拉菜单有 "test" 作为已经 selected 的选项。我也可以在点击时删除select它，然后再次select它，因为它在选项中。

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

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

它不能完全工作。在 selection-area/dropdown 搜索字段中，那些带有 selected 项目名称的绿色框通常会显示。对我来说，它不显示绿色框中的 string，which is in this.$store.state.variableIwantPreselected，但是 o只有一个绿色的小盒子，里面什么也没有写。

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

Answer 1

如果你使用 Vuex 是在存储使用状态下操作数据的最佳方式，
mutations, actions 和 getters 来获取任何类型的数据。有关详细信息，请查看 this post

Answer 2

对运行类似问题的人的进一步说明：检查，当你的组件是 rendered/loaded 时。就我而言，它是在商店中的值更改之前加载的（当您使用 vue-router 并且有多个组件仅显示一条路线时，往往会发生这种情况）。

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

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

在数据中：

values: []

在方法中：

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

在更新（）中：

this.checkValues()

Vue-Multiselect 和 Vuex：从商店中预选一个值

Vue-Multiselect and Vuex: Having a value from store pre-selected

javascript

vue.js

vuex

vue-multiselect