【Vuex+ElementUI】Vuex中取值存值以及异步加载的使用

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: '', // 绑定选择器的值
      options: [] // 下拉列表选项
    }
  },
  created() {
    this.fetchOptions(); // 创建组件时获取下拉列表选项
  },
  methods: {
    fetchOptions() {
      // 异步获取下拉列表选项
      this.$store.dispatch('getOptions').then(options => {
        this.options = options;
      }).catch(error => {
        console.error('获取下拉列表选项失败:', error);
      });
    }
  }
}
</script>

在这个例子中，我们使用了el-select和el-option组件来构建下拉列表，并通过Vuex的action来异步获取下拉列表的选项。选项存储在组件的options数组中，并绑定到el-option的v-for指令。用户选择的值绑定到selectedValue，它将与Vuex store中的状态进行同步。