vuex-helpers is a utility library for Vue 3 and Vuex 4, simplifying the use of Vuex's mapper functions. This library provides a set of hooks for Vuex, making it more concise to use Vuex in Vue components.
With npm: npm install @bye_past/vuex-helpers --save
import { useState, useGetters, useMutations, useActions } from '@bye_past/vuex-helpers';
const { platform } = useState(['platform']); // no namespace module
const { userInfo, loading } = useState('user', ['userInfo', 'loading']); // user namespace module
const { getUserId } = useGetters('user', ['getUserId']);
const { setUserInfo } = useMutations('user', ['setUserInfo']);
const { getUserInfo } = useActions('user', ['getUserInfo']);
// The return values of useState and useGetters are all responsive data// store/index.ts
import { createStore } from 'vuex';
const store = createStore({
strict: true,
state: {
platform: 'PC'
},
modules: {
user: {
namespaced: true,
state: {
userInfo: {
name: '',
userId: '',
},
loading: false
} as State,
getters: {
getUserId: (state: State) => state.userInfo.userId,
isLogin: (state: State) => !!state.userInfo.userId,
},
mutations: {
setUserInfo: (state: State, userInfo: UserInfo) => (state.userInfo = userInfo),
setLoading: (state: State, loading: boolean) => (state.loading = loading),
},
actions: {
getUserInfo: ({ commit }: { commit: (mutation: string, data: any) => void }) => new Promise(resolve => {
commit('setLoading', true)
setTimeout(() => {
const data = {
name: '张三',
userId: '1',
};
resolve(data);
commit('setUserInfo', data);
commit('setLoading', false)
}, 2000)
})
},
}
},
});
interface UserInfo {
name: string;
userId: string;
}
interface State {
userInfo: UserInfo;
loading: boolean
}
export default store;For mapping Vuex actions to your Vue component:
import { useState } from 'vuex-helpers';
const actions = useState(['myAction']);For mapping Vuex getters to your Vue component:
import { useGetters } from 'vuex-helpers';
const getters = useGetters(['myGetter']);For mapping Vuex mutations to your Vue component:
import { useMutations } from 'vuex-helpers';
const mutations = useMutations(['myMutation']);For mapping Vuex actions to your Vue component:
import { useActions } from 'vuex-helpers';
const actions = useActions(['myAction']);PRs and Issues are welcome!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent