Блог

Каков правильный подход к извлечению данных с помощью (с помощью действий vuex), получению данных и установке первого элемента в качестве выбранного параметра?

То, что у меня есть прямо сейчас, — это AddUser форма с полем выбора для роли. В созданной функции я вызываю функцию fetchRoles, используя vuex, для извлечения доступных ролей из серверной части. Я создал вычисляемое свойство 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;
}
 

добытчик ролей

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

Вы можете дождаться 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>