将 v-skeleton-loader 与 Vuex 一起使用的最佳实践答案

【问题标题】：Best practice to use v-skeleton-loader with Vuex将 v-skeleton-loader 与 Vuex 一起使用的最佳实践
【发布时间】：2022-06-22 22:15:44
【问题描述】：

我想在尚未从 API 获取数据时加载 v-skeleton-loder。问题是我使用 dispatch 来调用动作。

getSomething(id) {
 this.$store.dispatch("getSomething");
},

这是我的骨架，我还使用计算属性从 Vuex 调用了loading。

<v-skeleton-loader type="table" :loading="loading"></v-skeleton-loader>

我像这样将加载放在我的 store.js 中

state : {
loading:true}

actions: {
async getSomething(){
 await axios.get(url)
  .then(async () => {
      state.loading = false //after data is fetched
  })
  .catch((err) => {
     console.log(err)
  })
 }
}

这不起作用，我也不知道如何将其他骨架的 loading 值设置回 true。或者有没有更有效的方法可以在不使用 Vuex 的情况下实现这一目标？感谢所有帮助，谢谢！

【问题讨论】：

标签： vue.js vuetify.js vuex

【解决方案1】：

你不直接改变状态，它是使用突变完成的。我可能在代码中犯了错误。将其用作概念。

actions: {
async getSomething({commit}){
 commit('setLoading', true)
 await axios.get(url)
  .then(() => {
      // do something with data
  })
  .catch((err) => {
     console.log(err)
  })
  .finally(() => {
     commit('setLoading', false)
   })
 }
}

mutations: {
setLoading(state, isLoading) {
state.loading=isLoading
}
}

【讨论】：

哦，是的，对不起，我的错。但是对于其他骷髅，您如何/在哪里将其设置回true？
@tara 我已经像以前那样编辑了代码。下面也有很好的答案。

【解决方案2】：

您可以设置 vuex 状态以进行加载：

const state = {
  loading: true,
};

const mutations = {
  changeLoadingState(state, loading) {
    state.loading = loading;
  },
},

const actions = {
  setLoadingState({ commit }, loading) {
    commit('changeLoadingState', loading);
  },
}

然后在之前和之后调度动作

getSomething(id) {
  this.$store.dispatch("changeLoadingState", true)
  this.$store.dispatch("getSomething");
  this.$store.dispatch("changeLoadingState", false)
},

【讨论】：