vuex-plugin-loading
通过 vuex action 自动设置 loading state. 免去每次请求时都需要手动修改 loading state 的麻烦. 灵感来源于 dva-loading.
English Document
安装
$ npm install vuex-plugin-loading or yarn add vuex-plugin-loading
使用
import createVuexLoadingPlugin from "vuex-plugin-loading";
new Vuex.Store({
...
plugins: [createVuexLoadingPlugin()]
});
随后你就可以通过 store 使用对应的 loading state
配置参数
opts.namespace
: 该属性表示 loading 模块的命名空间. 类型为 String. 默认值为 loadingStore
opts.rootNamespace
: 该属性表示跟模块的命名空间. 类型为 String. 默认值为 rootStore
状态结构
loadingStore: {
global: false,
models: {
users: false,
...
},
actions: {
users/login: false,
users/logout: false,
...
}
}
示例 1(根据每一个 action 显示对应的 loading)
src/view/Test/index.vue
<template>
<div>
<LeftComponent :data="leftData" v-loading="loadingByLeft" />
<RightComponent :data="rightData" v-loading="loadingByRight" />
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import LeftComponent from '@/components/LeftComponent'
import RightComponent from '@/components/RightComponent'
const { mapState, mapActions } = createNamespacedHelpers('testStore')
const { mapState: mapStateByLoadingStore } = createNamespacedHelpers('loadingStore')
export default {
name: 'TestComponent',
components: { LeftComponent, RightComponent },
computed: {
...mapState(['leftData', 'rightData']),
...mapStateByLoadingStore({
loadingByLeft({ actions }) {
return actions['testStore/getLeftData']
},
loadingByRight({ actions }) {
return actions['testStore/getRightData']
},
}),
},
methods: {
...mapActions(['getLeftData', 'getRightData']),
},
mounted() {
this.getLeftData()
this.getRightData()
},
}
</script>
src/view/Test/store.js
const state = {
leftData: [],
rightData: [],
}
const mutations = {
setState(state, payload) {
Object.assign(state, payload)
},
}
const actions = {
async getLeftData({ commit }) {
const res = await get('对应的请求路径')
commit('setState', { leftData: res.data })
return res
},
async getRightData({ commit }) {
const res = await get('对应的请求路径')
commit('setState', { rightData: res.data })
return res
},
}
export const testStore = {
namespaced: true,
state,
actions,
mutations,
}
src/store/index.js
...
...
import { testStore } from '@/pages/Test/store'
new Vuex.Store({
...
modules: {
testStore,
},
})
示例 2(显示对应整个模块的 loading)
src/view/Test/index.vue
<template>
<div v-loading="loading">
<LeftComponent :data="leftData" />
<RightComponent :data="rightData" />
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import LeftComponent from '@/components/LeftComponent'
import RightComponent from '@/components/RightComponent'
const { mapState, mapActions } = createNamespacedHelpers('testStore')
const { mapState: mapStateByLoadingStore } = createNamespacedHelpers('loadingStore')
export default {
name: 'TestComponent',
components: { LeftComponent, RightComponent },
computed: {
...mapState(['leftData', 'rightData']),
...mapStateByLoadingStore({
loading({ modules }) {
return modules['testStore']
},
}),
},
methods: {
...mapActions(['getLeftData', 'getRightData']),
},
mounted() {
this.getLeftData()
this.getRightData()
},
}
</script>
src/view/Test/store.js
const state = {
leftData: [],
rightData: [],
}
const mutations = {
setState(state, payload) {
Object.assign(state, payload)
},
}
const actions = {
async getLeftData({ commit }) {
const res = await get('对应的请求路径')
commit('setState', { leftData: res.data })
return res
},
async getRightData({ commit }) {
const res = await get('对应的请求路径')
commit('setState', { rightData: res.data })
return res
},
}
export const testStore = {
namespaced: true,
state,
actions,
mutations,
}
src/store/index.js
...
...
import { testStore } from '@/pages/Test/store'
new Vuex.Store({
...
modules: {
testStore,
},
})
示例 3(根据整个 store 的 action 显示 loading)
src/view/Test/index.vue
<template>
<div v-loading="loading">
<LeftComponent :data="leftData" />
<RightComponent :data="rightData" />
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import LeftComponent from '@/components/LeftComponent'
import RightComponent from '@/components/RightComponent'
const { mapState, mapActions } = createNamespacedHelpers('testStore')
const { mapState: mapStateByLoadingStore } = createNamespacedHelpers('loadingStore')
export default {
name: 'TestComponent',
components: { LeftComponent, RightComponent },
computed: {
...mapState(['leftData', 'rightData']),
...mapStateByLoadingStore({
loading({ global }) {
return global
},
}),
},
methods: {
...mapActions(['getLeftData', 'getRightData']),
},
mounted() {
this.getLeftData()
this.getRightData()
},
}
</script>
src/view/Test/store.js
const state = {
leftData: [],
rightData: [],
}
const mutations = {
setState(state, payload) {
Object.assign(state, payload)
},
}
const actions = {
async getLeftData({ commit }) {
const res = await get('对应的请求路径')
commit('setState', { leftData: res.data })
return res
},
async getRightData({ commit }) {
const res = await get('对应的请求路径')
commit('setState', { rightData: res.data })
return res
},
}
export const testStore = {
namespaced: true,
state,
actions,
mutations,
}
src/store/index.js
...
...
import { testStore } from '@/pages/Test/store'
new Vuex.Store({
...
modules: {
testStore,
},
})
License
MIT