Vue-Multiselect 和 Vuex：预选商店中的值答案

【问题标题】：Vue-Multiselect and Vuex: Having a value from store pre-selectedVue-Multiselect 和 Vuex：预选商店中的值
【发布时间】：2019-10-27 04:22:46
【问题描述】：

想象一个带有 Vuex 的 Vuejs 应用程序。我想要一个多选下拉菜单。 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"]

多选下拉菜单已选择“测试”选项。我也可以在单击时取消选择它并再次选择它，因为它在选项中。

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

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

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

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

【问题讨论】：

你确定 this.$store.state.variableIwantPreselected 包含一串值数组吗？您是否尝试使用 console.log(this.$store.state.variableIwantPreselected) 进行测试？
我刚做了。该值是一个字符串，它在商店中。但是，如果我将 variableIwantPreselected 作为包含一个字符串的数组，它会在绿色的 vue-multiselect 框中显示为 ["variableIwantPreselected"]。我需要一个对象而不是一个字符串吗？

标签： javascript vue.js vuex vue-multiselect

【解决方案1】：

如果您使用 Vuex 在存储使用状态下操作数据的最佳方式，
获取任何类型的数据的突变、动作和吸气剂。更多信息请查看this post

【讨论】：

我不想操纵商店。我想从中获取一个值，以使用其值中的预选值初始化多选。该值来自存储，但不会更改。所以，我需要一个 getter 来获取值，但我不能使用值本身？
是的。您的存储中需要一个吸气剂。在某些情况下直接访问工作，在这种情况下（使用数组）似乎不起作用

【解决方案2】：

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

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

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

在数据中：

values: []

在方法中：

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

在更新（）中：

this.checkValues()

【讨论】：