使用VUEX使用V-Skeleton-Loader的最佳实践

发布于 2025-02-09 19:33:20 字数 626 浏览 2 评论 0原文

我想在尚未获取API的数据时进行V-Skeleton-Loder加载。问题是我使用调度调用该动作。

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

这是我的骨架，我还使用计算属性从VUEX中称为加载。

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

我将加载加载到我的商店中

state : {
loading:true}

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

。还是在不使用Vuex的情况下有其他更有效的方法来实现这一目标？感谢所有的帮助，谢谢！

原文

I want to make v-skeleton-loder loading when the data from API is not yet fetched. The thing is I use dispatch to call the action.

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

Here is my skeleton, and I also called the loading from Vuex using computed property.

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

I put the loading in my store.js like this

state : {
loading:true}

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

This doesn't work and I also don't know how to set the loading value back to true for other skeletons. Or is there any more efficient way to achieve this without using Vuex? Appreciate all help, thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简美 2025-02-16 19:33:20

您可以设置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("setLoadingState", true)
  this.$store.dispatch("getSomething");
  this.$store.dispatch("setLoadingState", false)
},

You can set vuex state for loading:

const state = {
  loading: true,
};

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

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

then dispatch action before and after

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

回复收藏 0 原文

痕至 2025-02-16 19:33:20

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

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

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

you don't mutate state directly, it is done using mutations.I may have made mistakes in the code. Use it as a concept.

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

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

回复收藏 0 原文

~没有更多了~