javascript - Vue-多选和 Vuex : Having a value from store pre-selected

Question

想象一个带有 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 和生命周期钩子(Hook)的东西，但我不知道是什么。

Answer 1

如果您使用 Vuex 来操作存储使用状态中的数据的最佳方式，
突变、 Action 和 getter 来获取任何类型的数据。欲了解更多信息，请查看this post