从 vuex store 和 select 变量中的第一个选项获取数据

Question

使用（使用 vuex 操作）获取数据、获取数据并将第一项设置为选定选项的正确方法是什么？

我现在得到的是一个带有角色选择框的 AddUser 表单。在创建的函数中，我使用 vuex 调用 fetchRoles 函数以从后端获取可用角色。我创建了一个计算属性 roles 来从商店取回角色。最后我想要一个本地 selectedRole 变量，默认为第一个角色。

<script>
    export default {
        created() {
            this.$store.dispatch('roles/fetchRoles');
        },
        computed: {
            roles() {
                return this.$store.getters['roles/roles'];
            },
        },
        data() {
            return {
                selectedRole: this.roles[0],
            };
        },
    };
</script>

因为在计算 this.roles[0] 之前数据是运行未定义。我可以将代码更改为 this.roles.length > 0 ? this.roles[0] : null，但是当角色最终可用时变量不会更新。一个可能的解决方案是使用手表属性但我觉得必须有更好的方法来实现这个概念。

加码

fetchRoles 操作

export async function fetchRoles(context) {
    try {
        if (context.state.roles.length === 0) {
            const response = await axios.get('roles');
            const roles = response.data.roles;
            return await context.commit('setRoles', roles);
        }
    } catch (error) {
        console.log(error);
        return error;
    }
}

setRoles 突变

export function setRoles(state, roles) {
    state.roles = roles;
}

角色getter

export function roles(state) {
    return state.roles;
}

Answer 1

您可以等待 fetchRoles 操作并在之后分配您的变量；

async created() {
    await this.$store.dispatch('roles/fetchRoles');
    this.selectedRole = this.roles[0];
}

Vue.config.devtools = false;
Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    posts: null
  },
  actions: {
    async fetchPosts() {
const posts = await fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json());
  this.commit('setPosts', posts)
    }
  },
  mutations: {
    setPosts(state, posts) {
      state.posts = posts;
    }
  }
})



var app = new Vue({
  el: '#app',
  store,
  data: {
    firstPost: null
  },
  computed: {
    posts() {
      return this.$store.state.posts;
    }
  },
  async created() {
    await this.$store.dispatch('fetchPosts');
    this.firstPost = this.posts[0];
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>

<div id="app">
  <div v-if="firstPost">
    firstPost : {{ firstPost.title }}
  </div>
  <div v-else>
    Loading...
  </div>
</div>

从 vuex store 和 select 变量中的第一个选项获取数据

Get data from vuex store and select first option in variable

vue.js

axios

vuex