Vuex Helpers

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.

Language

中文 English

Installation

With npm: npm install @bye_past/vuex-helpers --save

Usage

Get started

use

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

// 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;

1. useState

For mapping Vuex actions to your Vue component:

import { useState } from 'vuex-helpers';

const actions = useState(['myAction']);

2. useGetters

For mapping Vuex getters to your Vue component:

import { useGetters } from 'vuex-helpers';

const getters = useGetters(['myGetter']);

4. useMutations

For mapping Vuex mutations to your Vue component:

import { useMutations } from 'vuex-helpers';

const mutations = useMutations(['myMutation']);

4. useActions

For mapping Vuex actions to your Vue component:

import { useActions } from 'vuex-helpers';

const actions = useActions(['myAction']);

Contributions

PRs and Issues are welcome!