@vueblocks/vue-use-vuex - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

lib/index.cjs.js

@@ -7,5 +7,5 @@ 'use strict';
 
-const isObject = (arg) => Object.prototype.toString.call(arg) === '[object Object]';
-const isNull = (val) => val === null;
-const getProperty = (obj, key) => obj[key];
+const isObject = (val) => toString.call(val) === '[object Object]';
+const partial = (fn, ...partials) => (...args) => fn(...partials, ...args);
+
 /**
@@ -16,112 +16,169 @@ * Validate whether given map is valid or not
  */
-const isValidMap = (map) => Array.isArray(map) || isObject(map);
-const getStoreFromInstance = () => {
-    const vm = vueDemi.getCurrentInstance();
-    if (!vm) {
-        console.error('You must use this function within the "setup()" method, or insert the store as first argument.');
+function isValidMap(map) {
+    return Array.isArray(map) || isObject(map);
+}
+/**
+ * Normalize the map
+ * normalizeMap([1, 2, 3]) => [ { key: 1, val: 1 }, { key: 2, val: 2 }, { key: 3, val: 3 } ]
+ * normalizeMap({a: 1, b: 2, c: 3}) => [ { key: 'a', val: 1 }, { key: 'b', val: 2 }, { key: 'c', val: 3 } ]
+ * @param {Array|Object} map
+ * @return {Object}
+ */
+function normalizeMap(map) {
+    if (!isValidMap(map)) {
+        return [];
     }
-    return vueDemi.isVue3 ? vm.ctx.$store : vm.$store;
-};
-const computedGetter = (store = null, namespace, prop) => {
-    if (!store)
-        store = getStoreFromInstance();
-    return vueDemi.computed(() => store.getters[prop]);
-};
-const computedState = (store = null, namespace, prop) => {
-    if (!store)
-        store = getStoreFromInstance();
-    return vueDemi.computed(() => store.state[namespace][prop]);
-};
-const computedMethods = (store = null, namespace, cb) => {
-    const { state, getters } = store;
-    return vueDemi.computed(() => cb(state[namespace], getters));
-};
-const mapFormArray = (namespace, map, cb) => {
-    // console.group('mapFromArray')
-    // console.log(namespace)
-    // console.log(map)
-    // console.log(cb)
-    // console.groupEnd()
-    return map.reduce((result, prop) => {
-        result[prop] = cb(null, namespace, prop);
-        return result;
-    }, {});
-};
-const mapFromObject = (props, store, namespace, map, cb) => {
-    // console.group('mapFromObject')
-    // console.log(useType)
-    // console.log(namespace)
-    // console.log(map)
-    // console.log(cb)
-    // console.groupEnd()
-    const result = {};
-    for (const key in map) {
-        const prop = getProperty(map, key);
-        if (typeof prop === 'function' && !isNull(namespace)) {
-            result[key] = computedMethods(store, namespace, prop);
+    return Array.isArray(map)
+        ? map.map((key) => ({ key, val: key }))
+        : Object.keys(map).map(key => ({ key, val: map[key] }));
+}
+/**
+ * Return a function expect two param contains namespace and map. it will normalize the namespace and then the param's function will handle the new namespace and the map.
+ * @param {Function} fn
+ * @return {Function}
+ */
+function normalizeNamespace(fn) {
+    return (namespace, map) => {
+        if (typeof namespace !== 'string') {
+            map = namespace;
+            namespace = '';
         }
-        if (props.includes(prop)) {
-            result[key] = cb(null, namespace, prop);
+        else if (namespace.charAt(namespace.length - 1) !== '/') {
+            namespace += '/';
         }
-    }
-    return result;
-};
-const useVuexKeys = (store, namespace, type) => {
-    const { state, getters, _mutations, _actions } = store;
-    const keysMap = {
-        useState: state[namespace],
-        useGetters: getters,
-        useMutations: _mutations,
-        useActions: _actions
+        return fn(namespace, map);
     };
-    return Object.keys(keysMap[type]);
-};
-const useMapping = (type, store, namespace, map, cb) => {
-    if (!map)
-        return {};
-    if (Array.isArray(map)) {
-        return mapFormArray(namespace, map, cb);
+}
+/**
+ * Search a special module from store by namespace. if module not exist, print error message.
+ * @param {Object} store
+ * @param {String} helper
+ * @param {String} namespace
+ * @return {Object}
+ */
+function getModuleByNamespace(store, helper, namespace) {
+    const module = store._modulesNamespaceMap[namespace];
+    if ((process.env.NODE_ENV !== 'production') && !module) {
+        console.error(`[vuex] module namespace not found in ${helper}(): ${namespace}`);
     }
-    if (isObject(map)) {
-        const vuexKeys = useVuexKeys(store, namespace, type);
-        return mapFromObject(vuexKeys, store, namespace, map, cb);
+    return module;
+}
+/**
+ * Reduce the code which written in Vue.js for getting the state.
+ * @param {String} [namespace] - Module's namespace
+ * @param {Object|Array} states # Object's item can be a function which accept state and getters for param, you can do something for state and getters in it.
+ * @param {Object}
+ */
+const useState = (store, namespace, states) => {
+    const res = {};
+    if ((process.env.NODE_ENV !== 'production') && !isValidMap(states)) {
+        console.error('[vuex] useState: mapper parameter must be either an Array or an Object');
     }
+    normalizeMap(states).forEach(({ key, val }) => {
+        res[key] = vueDemi.computed(function mappedState() {
+            let state = store.state;
+            let getters = store.getters;
+            if (namespace) {
+                const module = getModuleByNamespace(store, 'useState', namespace);
+                if (!module) {
+                    return;
+                }
+                state = module.context.state;
+                getters = module.context.getters;
+            }
+            return typeof val === 'function'
+                ? val(state, getters)
+                : state[val];
+        });
+        // mark vuex state for devtools
+        // res[key].vuex = true
+    });
+    return res;
 };
-const getMutations = (store = null, namespace, type) => {
-    if (!store)
-        store = getStoreFromInstance();
-    return function mappedMutation(...args) {
-        return store.commit(type, ...args);
-    };
+/**
+ * Reduce the code which written in Vue.js for committing the mutation
+ * @param {String} [namespace] - Module's namespace
+ * @param {Object|Array} mutations # Object's item can be a function which accept `commit` function as the first param, it can accept anthor params. You can commit mutation and do any other things in this function. specially, You need to pass anthor params from the mapped function.
+ * @return {Object}
+ */
+const useMutations = (store, namespace, mutations) => {
+    const res = {};
+    if ((process.env.NODE_ENV !== 'production') && !isValidMap(mutations)) {
+        console.error('[vuex] useMutations: mapper parameter must be either an Array or an Object');
+    }
+    normalizeMap(mutations).forEach(({ key, val }) => {
+        res[key] = function mappedMutation(...args) {
+            // Get the commit method from store
+            let commit = store.commit;
+            if (namespace) {
+                const module = getModuleByNamespace(store, 'useMutations', namespace);
+                if (!module) {
+                    return;
+                }
+                commit = module.context.commit;
+            }
+            return typeof val === 'function'
+                ? val.apply(this, [commit].concat(args))
+                : commit.apply(store, [val].concat(args));
+        };
+    });
+    return res;
 };
-const getActions = (store = null, namespace, action) => {
-    if (!store)
-        store = getStoreFromInstance();
-    return function mappedAction(...args) {
-        return store.dispatch(action, args);
-    };
-};
-const useGetters = (store, namespace, map) => {
-    if (!isValidMap(map)) {
+/**
+ * Reduce the code which written in Vue.js for getting the getters
+ * @param {String} [namespace] - Module's namespace
+ * @param {Object|Array} getters
+ * @return {Object}
+ */
+const useGetters = (store, namespace, getters) => {
+    const res = {};
+    if ((process.env.NODE_ENV !== 'production') && !isValidMap(getters)) {
         console.error('[vuex] useGetters: mapper parameter must be either an Array or an Object');
     }
-    return useMapping.bind(null, useGetters.name)(store, namespace, map, computedGetter);
+    normalizeMap(getters).forEach(({ key, val }) => {
+        // The namespace has been mutated by normalizeNamespace
+        val = namespace + val;
+        res[key] = vueDemi.computed(function mappedGetter() {
+            if (namespace && !getModuleByNamespace(store, 'useGetters', namespace)) {
+                return;
+            }
+            if ((process.env.NODE_ENV !== 'production') && !(val in store.getters)) {
+                console.error(`[vuex] unknown getter: ${val}`);
+                return;
+            }
+            return store.getters[val];
+        });
+        // mark vuex getter for devtools
+        // res[key].vuex = true
+    });
+    return res;
 };
-const useState = (store, namespace, map) => {
-    if (!isValidMap(map)) {
-        console.error('[vuex] useState: mapper parameter must be either an Array or an Object');
-    }
-    return useMapping.bind(null, useState.name)(store, namespace, map, computedState);
-};
-const useMutations = (store, namespace, map) => {
-    if (!isValidMap(map)) {
-        console.error('[vuex] useMutations: mapper parameter must be either an Array or an Object');
-    }
-    return useMapping.bind(null, useMutations.name)(store, namespace, map, getMutations);
-};
-const useActions = (store, namespace, map) => {
-    if (!isValidMap(map)) {
+/**
+ * Reduce the code which written in Vue.js for dispatch the action
+ * @param {String} [namespace] - Module's namespace
+ * @param {Object|Array} actions # Object's item can be a function which accept `dispatch` function as the first param, it can accept anthor params. You can dispatch action and do any other things in this function. specially, You need to pass anthor params from the mapped function.
+ * @return {Object}
+ */
+const useActions = (store, namespace, actions) => {
+    const res = {};
+    if ((process.env.NODE_ENV !== 'production') && !isValidMap(actions)) {
         console.error('[vuex] useActions: mapper parameter must be either an Array or an Object');
     }
-    return useMapping.bind(null, useActions.name)(store, namespace, map, getActions);
+    normalizeMap(actions).forEach(({ key, val }) => {
+        res[key] = function mappedAction(...args) {
+            // get dispatch function from store
+            let dispatch = store.dispatch;
+            if (namespace) {
+                const module = getModuleByNamespace(store, 'useActions', namespace);
+                if (!module) {
+                    return;
+                }
+                dispatch = module.context.dispatch;
+            }
+            return typeof val === 'function'
+                ? val.apply(this, [dispatch].concat(args))
+                : dispatch.apply(store, [val].concat(args));
+        };
+    });
+    return res;
 };
@@ -133,22 +190,48 @@ /**
  */
-const createNamespacedHelpers = (namespace) => ({
-    mapState: useState.bind(null, namespace),
-    mapGetters: useGetters.bind(null, namespace),
-    mapMutations: useMutations.bind(null, namespace),
-    mapActions: useActions.bind(null, namespace)
-});
-const useVuex = (store) => {
+const createNamespacedHelpers = (store, namespace) => {
+    // pre-specify initial arguments with store instance
+    return {
+        useState: partial(normalizeNamespace(partial(useState, store)), namespace),
+        useGetters: partial(normalizeNamespace(partial(useGetters, store)), namespace),
+        useMutations: partial(normalizeNamespace(partial(useMutations, store)), namespace),
+        useActions: partial(normalizeNamespace(partial(useActions, store)), namespace)
+    };
+};
+/**
+ * Get $store from current instance
+ * @return {Store} ### vm.$store
+ */
+const getStoreFromInstance = () => {
+    const vm = vueDemi.getCurrentInstance();
+    if (!vm) {
+        console.error('You must use this function within the "setup()" method');
+    }
+    return vueDemi.isVue3 ? vm.ctx.$store : vm.$store;
+};
+/**
+ * Use Vuex with composition api easily. Both support Vue2.x / Vue3.x
+ * @param {String} namespace
+ * @param {Store} store ### vm.$store
+ */
+function useVuex(namespace, store) {
     if (!store)
         store = getStoreFromInstance();
-    // console.log(store)
-    return {
-        useState: useState.bind(null, store),
-        useGetters: useGetters.bind(null, store),
-        useMutations: useMutations.bind(null, store),
-        useActions: useActions.bind(null, store),
-        getStoreFromInstance,
-        createNamespacedHelpers
+    // pre-specify initial arguments with store instance
+    let helpers = {
+        useState: normalizeNamespace(partial(useState, store)),
+        useGetters: normalizeNamespace(partial(useGetters, store)),
+        useMutations: normalizeNamespace(partial(useMutations, store)),
+        useActions: normalizeNamespace(partial(useActions, store))
     };
-};
+    if (arguments.length === 1 && namespace) {
+        helpers = partial(createNamespacedHelpers, store)(namespace);
+    }
+    return helpers;
+}
 
+exports.createNamespacedHelpers = createNamespacedHelpers;
+exports.useActions = useActions;
+exports.useGetters = useGetters;
+exports.useMutations = useMutations;
+exports.useState = useState;
 exports.useVuex = useVuex;

lib/index.d.ts

@@ -1,15 +0,54 @@
-declare const useVuex: (store: any) => {
-    useState: (namespace: string, map: object | string[]) => object | undefined;
-    useGetters: (namespace: string, map: object | string[]) => object | undefined;
-    useMutations: (namespace: string, map: object | string[]) => object | undefined;
-    useActions: (namespace: string, map: object | string[]) => object | undefined;
-    getStoreFromInstance: () => any;
-    createNamespacedHelpers: (namespace: string) => {
-        mapState: (namespace: string, map: object | string[]) => object | undefined;
-        mapGetters: (namespace: string, map: object | string[]) => object | undefined;
-        mapMutations: (namespace: string, map: object | string[]) => object | undefined;
-        mapActions: (namespace: string, map: object | string[]) => object | undefined;
-    };
+import { Store } from 'vuex';
+
+/**
+ * Reduce the code which written in Vue.js for getting the state.
+ * @param {String} [namespace] - Module's namespace
+ * @param {Object|Array} states # Object's item can be a function which accept state and getters for param, you can do something for state and getters in it.
+ * @param {Object}
+ */
+declare const useState: (store: any, namespace: string, states: Array<string> | object) => any;
+/**
+ * Reduce the code which written in Vue.js for committing the mutation
+ * @param {String} [namespace] - Module's namespace
+ * @param {Object|Array} mutations # Object's item can be a function which accept `commit` function as the first param, it can accept anthor params. You can commit mutation and do any other things in this function. specially, You need to pass anthor params from the mapped function.
+ * @return {Object}
+ */
+declare const useMutations: (store: any, namespace: string, mutations: Array<string> | object) => any;
+/**
+ * Reduce the code which written in Vue.js for getting the getters
+ * @param {String} [namespace] - Module's namespace
+ * @param {Object|Array} getters
+ * @return {Object}
+ */
+declare const useGetters: (store: any, namespace: string, getters: Array<string> | object) => any;
+/**
+ * Reduce the code which written in Vue.js for dispatch the action
+ * @param {String} [namespace] - Module's namespace
+ * @param {Object|Array} actions # Object's item can be a function which accept `dispatch` function as the first param, it can accept anthor params. You can dispatch action and do any other things in this function. specially, You need to pass anthor params from the mapped function.
+ * @return {Object}
+ */
+declare const useActions: (store: any, namespace: string, actions: Array<string> | object) => any;
+/**
+ * Rebinding namespace param for mapXXX function in special scoped, and return them by simple object
+ * @param {String} namespace
+ * @return {Object}
+ */
+declare const createNamespacedHelpers: (store: any, namespace: string) => {
+    useState: (...args: any[]) => any;
+    useGetters: (...args: any[]) => any;
+    useMutations: (...args: any[]) => any;
+    useActions: (...args: any[]) => any;
 };
+/**
+ * Use Vuex with composition api easily. Both support Vue2.x / Vue3.x
+ * @param {String} namespace
+ * @param {Store} store ### vm.$store
+ */
+declare function useVuex(namespace?: string, store?: Store<any>): {
+    useState: (namespace: string, map: object | string[]) => any;
+    useGetters: (namespace: string, map: object | string[]) => any;
+    useMutations: (namespace: string, map: object | string[]) => any;
+    useActions: (namespace: string, map: object | string[]) => any;
+};
 
-export { useVuex };
+export { createNamespacedHelpers, useActions, useGetters, useMutations, useState, useVuex };

lib/index.esm.js

@@ -1,3 +0,5 @@
-import { isVue3, getCurrentInstance, computed } from 'vue-demi';
+import { getCurrentInstance, computed } from 'vue-demi';
 
+// import { Store } from 'vuex/types'
+// import { isObject, isNull } from 'lodash'
 const isObject = (arg) => Object.prototype.toString.call(arg) === '[object Object]';
@@ -17,18 +19,4 @@ const isNull = (val) => val === null;
     }
-    return isVue3 ? vm.ctx.$store : vm.$store;
+    return vm.$store;
 };
-const computedGetter = (store = null, namespace, prop) => {
-    if (!store)
-        store = getStoreFromInstance();
-    return computed(() => store.getters[prop]);
-};
-const computedState = (store = null, namespace, prop) => {
-    if (!store)
-        store = getStoreFromInstance();
-    return computed(() => store.state[namespace][prop]);
-};
-const computedMethods = (store = null, namespace, cb) => {
-    const { state, getters } = store;
-    return computed(() => cb(state[namespace], getters));
-};
 const mapFormArray = (namespace, map, cb) => {
@@ -52,4 +40,4 @@ // console.group('mapFromArray')
     // console.groupEnd()
-    const result = {};
-    for (const key in map) {
+    let result = {};
+    for (let key in map) {
         const prop = getProperty(map, key);
@@ -68,6 +56,6 @@ if (typeof prop === 'function' && !isNull(namespace)) {
     const keysMap = {
-        useState: state[namespace],
-        useGetters: getters,
-        useMutations: _mutations,
-        useActions: _actions
+        'useState': state[namespace],
+        'useGetters': getters,
+        'useMutations': _mutations,
+        'useActions': _actions
     };
@@ -87,7 +75,22 @@ return Object.keys(keysMap[type]);
 };
+const computedGetter = (store = null, namespace, prop) => {
+    if (!store)
+        store = getStoreFromInstance();
+    return computed(() => store.getters[prop]);
+};
+const computedState = (store = null, namespace, prop) => {
+    if (!store)
+        store = getStoreFromInstance();
+    return computed(() => store.state[namespace][prop]);
+};
+const computedMethods = (store = null, namespace, cb) => {
+    const { state, getters } = store;
+    return computed(() => cb(state[namespace], getters));
+};
 const getMutations = (store = null, namespace, type) => {
     if (!store)
         store = getStoreFromInstance();
-    return function mappedMutation(...args) {
-        return store.commit(type, ...args);
+    return function mappedMutation() {
+        const args = arguments;
+        return store.commit.apply(store, [type, ...args]);
     };
@@ -98,4 +101,5 @@ };
         store = getStoreFromInstance();
-    return function mappedAction(...args) {
-        return store.dispatch(action, args);
+    return function mappedAction() {
+        const args = arguments;
+        return store.dispatch.apply(store, [action, ...args]);
     };
@@ -141,3 +145,3 @@ };
         store = getStoreFromInstance();
-    // console.log(store)
+    console.log(store);
     return {
@@ -144,0 +148,0 @@ useState: useState.bind(null, store),

lib/index.umd.js

@@ -7,5 +7,5 @@ (function (global, factory) {
 
-  const isObject = (arg) => Object.prototype.toString.call(arg) === '[object Object]';
-  const isNull = (val) => val === null;
-  const getProperty = (obj, key) => obj[key];
+  const isObject = (val) => toString.call(val) === '[object Object]';
+  const partial = (fn, ...partials) => (...args) => fn(...partials, ...args);
+
   /**
@@ -16,112 +16,169 @@ * Validate whether given map is valid or not
    */
-  const isValidMap = (map) => Array.isArray(map) || isObject(map);
-  const getStoreFromInstance = () => {
-      const vm = vueDemi.getCurrentInstance();
-      if (!vm) {
-          console.error('You must use this function within the "setup()" method, or insert the store as first argument.');
+  function isValidMap(map) {
+      return Array.isArray(map) || isObject(map);
+  }
+  /**
+   * Normalize the map
+   * normalizeMap([1, 2, 3]) => [ { key: 1, val: 1 }, { key: 2, val: 2 }, { key: 3, val: 3 } ]
+   * normalizeMap({a: 1, b: 2, c: 3}) => [ { key: 'a', val: 1 }, { key: 'b', val: 2 }, { key: 'c', val: 3 } ]
+   * @param {Array|Object} map
+   * @return {Object}
+   */
+  function normalizeMap(map) {
+      if (!isValidMap(map)) {
+          return [];
       }
-      return vueDemi.isVue3 ? vm.ctx.$store : vm.$store;
-  };
-  const computedGetter = (store = null, namespace, prop) => {
-      if (!store)
-          store = getStoreFromInstance();
-      return vueDemi.computed(() => store.getters[prop]);
-  };
-  const computedState = (store = null, namespace, prop) => {
-      if (!store)
-          store = getStoreFromInstance();
-      return vueDemi.computed(() => store.state[namespace][prop]);
-  };
-  const computedMethods = (store = null, namespace, cb) => {
-      const { state, getters } = store;
-      return vueDemi.computed(() => cb(state[namespace], getters));
-  };
-  const mapFormArray = (namespace, map, cb) => {
-      // console.group('mapFromArray')
-      // console.log(namespace)
-      // console.log(map)
-      // console.log(cb)
-      // console.groupEnd()
-      return map.reduce((result, prop) => {
-          result[prop] = cb(null, namespace, prop);
-          return result;
-      }, {});
-  };
-  const mapFromObject = (props, store, namespace, map, cb) => {
-      // console.group('mapFromObject')
-      // console.log(useType)
-      // console.log(namespace)
-      // console.log(map)
-      // console.log(cb)
-      // console.groupEnd()
-      const result = {};
-      for (const key in map) {
-          const prop = getProperty(map, key);
-          if (typeof prop === 'function' && !isNull(namespace)) {
-              result[key] = computedMethods(store, namespace, prop);
+      return Array.isArray(map)
+          ? map.map((key) => ({ key, val: key }))
+          : Object.keys(map).map(key => ({ key, val: map[key] }));
+  }
+  /**
+   * Return a function expect two param contains namespace and map. it will normalize the namespace and then the param's function will handle the new namespace and the map.
+   * @param {Function} fn
+   * @return {Function}
+   */
+  function normalizeNamespace(fn) {
+      return (namespace, map) => {
+          if (typeof namespace !== 'string') {
+              map = namespace;
+              namespace = '';
           }
-          if (props.includes(prop)) {
-              result[key] = cb(null, namespace, prop);
+          else if (namespace.charAt(namespace.length - 1) !== '/') {
+              namespace += '/';
           }
-      }
-      return result;
-  };
-  const useVuexKeys = (store, namespace, type) => {
-      const { state, getters, _mutations, _actions } = store;
-      const keysMap = {
-          useState: state[namespace],
-          useGetters: getters,
-          useMutations: _mutations,
-          useActions: _actions
+          return fn(namespace, map);
       };
-      return Object.keys(keysMap[type]);
-  };
-  const useMapping = (type, store, namespace, map, cb) => {
-      if (!map)
-          return {};
-      if (Array.isArray(map)) {
-          return mapFormArray(namespace, map, cb);
+  }
+  /**
+   * Search a special module from store by namespace. if module not exist, print error message.
+   * @param {Object} store
+   * @param {String} helper
+   * @param {String} namespace
+   * @return {Object}
+   */
+  function getModuleByNamespace(store, helper, namespace) {
+      const module = store._modulesNamespaceMap[namespace];
+      if ( !module) {
+          console.error(`[vuex] module namespace not found in ${helper}(): ${namespace}`);
       }
-      if (isObject(map)) {
-          const vuexKeys = useVuexKeys(store, namespace, type);
-          return mapFromObject(vuexKeys, store, namespace, map, cb);
+      return module;
+  }
+  /**
+   * Reduce the code which written in Vue.js for getting the state.
+   * @param {String} [namespace] - Module's namespace
+   * @param {Object|Array} states # Object's item can be a function which accept state and getters for param, you can do something for state and getters in it.
+   * @param {Object}
+   */
+  const useState = (store, namespace, states) => {
+      const res = {};
+      if ( !isValidMap(states)) {
+          console.error('[vuex] useState: mapper parameter must be either an Array or an Object');
       }
+      normalizeMap(states).forEach(({ key, val }) => {
+          res[key] = vueDemi.computed(function mappedState() {
+              let state = store.state;
+              let getters = store.getters;
+              if (namespace) {
+                  const module = getModuleByNamespace(store, 'useState', namespace);
+                  if (!module) {
+                      return;
+                  }
+                  state = module.context.state;
+                  getters = module.context.getters;
+              }
+              return typeof val === 'function'
+                  ? val(state, getters)
+                  : state[val];
+          });
+          // mark vuex state for devtools
+          // res[key].vuex = true
+      });
+      return res;
   };
-  const getMutations = (store = null, namespace, type) => {
-      if (!store)
-          store = getStoreFromInstance();
-      return function mappedMutation(...args) {
-          return store.commit(type, ...args);
-      };
+  /**
+   * Reduce the code which written in Vue.js for committing the mutation
+   * @param {String} [namespace] - Module's namespace
+   * @param {Object|Array} mutations # Object's item can be a function which accept `commit` function as the first param, it can accept anthor params. You can commit mutation and do any other things in this function. specially, You need to pass anthor params from the mapped function.
+   * @return {Object}
+   */
+  const useMutations = (store, namespace, mutations) => {
+      const res = {};
+      if ( !isValidMap(mutations)) {
+          console.error('[vuex] useMutations: mapper parameter must be either an Array or an Object');
+      }
+      normalizeMap(mutations).forEach(({ key, val }) => {
+          res[key] = function mappedMutation(...args) {
+              // Get the commit method from store
+              let commit = store.commit;
+              if (namespace) {
+                  const module = getModuleByNamespace(store, 'useMutations', namespace);
+                  if (!module) {
+                      return;
+                  }
+                  commit = module.context.commit;
+              }
+              return typeof val === 'function'
+                  ? val.apply(this, [commit].concat(args))
+                  : commit.apply(store, [val].concat(args));
+          };
+      });
+      return res;
   };
-  const getActions = (store = null, namespace, action) => {
-      if (!store)
-          store = getStoreFromInstance();
-      return function mappedAction(...args) {
-          return store.dispatch(action, args);
-      };
-  };
-  const useGetters = (store, namespace, map) => {
-      if (!isValidMap(map)) {
+  /**
+   * Reduce the code which written in Vue.js for getting the getters
+   * @param {String} [namespace] - Module's namespace
+   * @param {Object|Array} getters
+   * @return {Object}
+   */
+  const useGetters = (store, namespace, getters) => {
+      const res = {};
+      if ( !isValidMap(getters)) {
           console.error('[vuex] useGetters: mapper parameter must be either an Array or an Object');
       }
-      return useMapping.bind(null, useGetters.name)(store, namespace, map, computedGetter);
+      normalizeMap(getters).forEach(({ key, val }) => {
+          // The namespace has been mutated by normalizeNamespace
+          val = namespace + val;
+          res[key] = vueDemi.computed(function mappedGetter() {
+              if (namespace && !getModuleByNamespace(store, 'useGetters', namespace)) {
+                  return;
+              }
+              if ( !(val in store.getters)) {
+                  console.error(`[vuex] unknown getter: ${val}`);
+                  return;
+              }
+              return store.getters[val];
+          });
+          // mark vuex getter for devtools
+          // res[key].vuex = true
+      });
+      return res;
   };
-  const useState = (store, namespace, map) => {
-      if (!isValidMap(map)) {
-          console.error('[vuex] useState: mapper parameter must be either an Array or an Object');
-      }
-      return useMapping.bind(null, useState.name)(store, namespace, map, computedState);
-  };
-  const useMutations = (store, namespace, map) => {
-      if (!isValidMap(map)) {
-          console.error('[vuex] useMutations: mapper parameter must be either an Array or an Object');
-      }
-      return useMapping.bind(null, useMutations.name)(store, namespace, map, getMutations);
-  };
-  const useActions = (store, namespace, map) => {
-      if (!isValidMap(map)) {
+  /**
+   * Reduce the code which written in Vue.js for dispatch the action
+   * @param {String} [namespace] - Module's namespace
+   * @param {Object|Array} actions # Object's item can be a function which accept `dispatch` function as the first param, it can accept anthor params. You can dispatch action and do any other things in this function. specially, You need to pass anthor params from the mapped function.
+   * @return {Object}
+   */
+  const useActions = (store, namespace, actions) => {
+      const res = {};
+      if ( !isValidMap(actions)) {
           console.error('[vuex] useActions: mapper parameter must be either an Array or an Object');
       }
-      return useMapping.bind(null, useActions.name)(store, namespace, map, getActions);
+      normalizeMap(actions).forEach(({ key, val }) => {
+          res[key] = function mappedAction(...args) {
+              // get dispatch function from store
+              let dispatch = store.dispatch;
+              if (namespace) {
+                  const module = getModuleByNamespace(store, 'useActions', namespace);
+                  if (!module) {
+                      return;
+                  }
+                  dispatch = module.context.dispatch;
+              }
+              return typeof val === 'function'
+                  ? val.apply(this, [dispatch].concat(args))
+                  : dispatch.apply(store, [val].concat(args));
+          };
+      });
+      return res;
   };
@@ -133,22 +190,48 @@ /**
    */
-  const createNamespacedHelpers = (namespace) => ({
-      mapState: useState.bind(null, namespace),
-      mapGetters: useGetters.bind(null, namespace),
-      mapMutations: useMutations.bind(null, namespace),
-      mapActions: useActions.bind(null, namespace)
-  });
-  const useVuex = (store) => {
+  const createNamespacedHelpers = (store, namespace) => {
+      // pre-specify initial arguments with store instance
+      return {
+          useState: partial(normalizeNamespace(partial(useState, store)), namespace),
+          useGetters: partial(normalizeNamespace(partial(useGetters, store)), namespace),
+          useMutations: partial(normalizeNamespace(partial(useMutations, store)), namespace),
+          useActions: partial(normalizeNamespace(partial(useActions, store)), namespace)
+      };
+  };
+  /**
+   * Get $store from current instance
+   * @return {Store} ### vm.$store
+   */
+  const getStoreFromInstance = () => {
+      const vm = vueDemi.getCurrentInstance();
+      if (!vm) {
+          console.error('You must use this function within the "setup()" method');
+      }
+      return vueDemi.isVue3 ? vm.ctx.$store : vm.$store;
+  };
+  /**
+   * Use Vuex with composition api easily. Both support Vue2.x / Vue3.x
+   * @param {String} namespace
+   * @param {Store} store ### vm.$store
+   */
+  function useVuex(namespace, store) {
       if (!store)
           store = getStoreFromInstance();
-      // console.log(store)
-      return {
-          useState: useState.bind(null, store),
-          useGetters: useGetters.bind(null, store),
-          useMutations: useMutations.bind(null, store),
-          useActions: useActions.bind(null, store),
-          getStoreFromInstance,
-          createNamespacedHelpers
+      // pre-specify initial arguments with store instance
+      let helpers = {
+          useState: normalizeNamespace(partial(useState, store)),
+          useGetters: normalizeNamespace(partial(useGetters, store)),
+          useMutations: normalizeNamespace(partial(useMutations, store)),
+          useActions: normalizeNamespace(partial(useActions, store))
       };
-  };
+      if (arguments.length === 1 && namespace) {
+          helpers = partial(createNamespacedHelpers, store)(namespace);
+      }
+      return helpers;
+  }
 
+  exports.createNamespacedHelpers = createNamespacedHelpers;
+  exports.useActions = useActions;
+  exports.useGetters = useGetters;
+  exports.useMutations = useMutations;
+  exports.useState = useState;
   exports.useVuex = useVuex;
@@ -155,0 +238,0 @@

lib/index.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue-demi")):"function"==typeof define&&define.amd?define(["exports","vue-demi"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueUseVuex={},e.VueDemi)}(this,(function(e,t){"use strict";const n=e=>"[object Object]"===Object.prototype.toString.call(e),u=(e,t)=>e[t],s=e=>Array.isArray(e)||n(e),l=()=>{const e=t.getCurrentInstance();return t.isVue3?e.ctx.$store:e.$store},r=(e=null,n,u)=>(e||(e=l()),t.computed((()=>e.getters[u]))),i=(e=null,n,u)=>(e||(e=l()),t.computed((()=>e.state[n][u]))),o=(e=null,n,u)=>{const{state:s,getters:l}=e;return t.computed((()=>u(s[n],l)))},c=(e,t,s,l,r)=>{if(!l)return{};if(Array.isArray(l))return((e,t,n)=>t.reduce(((t,u)=>(t[u]=n(null,e,u),t)),{}))(s,l,r);if(n(l)){return((e,t,n,s,l)=>{const r={};for(const i in s){const c=u(s,i);"function"==typeof c&&null!==n&&(r[i]=o(t,n,c)),e.includes(c)&&(r[i]=l(null,n,c))}return r})(((e,t,n)=>{const{state:u,getters:s,_mutations:l,_actions:r}=e,i={useState:u[t],useGetters:s,useMutations:l,useActions:r};return Object.keys(i[n])})(t,s,e),t,s,l,r)}},a=(e=null,t,n)=>(e||(e=l()),function(...t){return e.commit(n,...t)}),d=(e=null,t,n)=>(e||(e=l()),function(...t){return e.dispatch(n,t)}),f=(e,t,n)=>(s(n),c.bind(null,f.name)(e,t,n,r)),m=(e,t,n)=>(s(n),c.bind(null,m.name)(e,t,n,i)),p=(e,t,n)=>(s(n),c.bind(null,p.name)(e,t,n,a)),b=(e,t,n)=>(s(n),c.bind(null,b.name)(e,t,n,d)),y=e=>({mapState:m.bind(null,e),mapGetters:f.bind(null,e),mapMutations:p.bind(null,e),mapActions:b.bind(null,e)});e.useVuex=e=>(e||(e=l()),{useState:m.bind(null,e),useGetters:f.bind(null,e),useMutations:p.bind(null,e),useActions:b.bind(null,e),getStoreFromInstance:l,createNamespacedHelpers:y}),Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue-demi")):"function"==typeof define&&define.amd?define(["exports","vue-demi"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).VueUseVuex={},t.VueDemi)}(this,(function(t,e){"use strict";const n=(t,...e)=>(...n)=>t(...e,...n);function r(t){return Array.isArray(t)||(e=t,"[object Object]"===toString.call(e));var e}function o(t){return r(t)?Array.isArray(t)?t.map((t=>({key:t,val:t}))):Object.keys(t).map((e=>({key:e,val:t[e]}))):[]}function u(t){return(e,n)=>("string"!=typeof e?(n=e,e=""):"/"!==e.charAt(e.length-1)&&(e+="/"),t(e,n))}function s(t,e,n){return t._modulesNamespaceMap[n]}const c=(t,n,r)=>{const u={};return o(r).forEach((({key:r,val:o})=>{u[r]=e.computed((function(){let e=t.state,r=t.getters;if(n){const o=s(t,0,n);if(!o)return;e=o.context.state,r=o.context.getters}return"function"==typeof o?o(e,r):e[o]}))})),u},i=(t,e,n)=>{const r={};return o(n).forEach((({key:n,val:o})=>{r[n]=function(...n){let r=t.commit;if(e){const n=s(t,0,e);if(!n)return;r=n.context.commit}return"function"==typeof o?o.apply(this,[r].concat(n)):r.apply(t,[o].concat(n))}})),r},a=(t,n,r)=>{const u={};return o(r).forEach((({key:r,val:o})=>{o=n+o,u[r]=e.computed((function(){if(!n||s(t,0,n))return t.getters[o]}))})),u},f=(t,e,n)=>{const r={};return o(n).forEach((({key:n,val:o})=>{r[n]=function(...n){let r=t.dispatch;if(e){const n=s(t,0,e);if(!n)return;r=n.context.dispatch}return"function"==typeof o?o.apply(this,[r].concat(n)):r.apply(t,[o].concat(n))}})),r},p=(t,e)=>({useState:n(u(n(c,t)),e),useGetters:n(u(n(a,t)),e),useMutations:n(u(n(i,t)),e),useActions:n(u(n(f,t)),e)}),l=()=>{const t=e.getCurrentInstance();return e.isVue3?t.ctx.$store:t.$store};t.createNamespacedHelpers=p,t.useActions=f,t.useGetters=a,t.useMutations=i,t.useState=c,t.useVuex=function(t,e){e||(e=l());let r={useState:u(n(c,e)),useGetters:u(n(a,e)),useMutations:u(n(i,e)),useActions:u(n(f,e))};return 1===arguments.length&&t&&(r=n(p,e)(t)),r},Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "@vueblocks/vue-use-vuex",
   "description": "Use Vuex With Composition API Easily.",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "main": "lib/index.cjs.js",
@@ -18,3 +18,3 @@ "types": "lib/index.d.ts",
     "type": "git",
-    "url": "git+https://github.com/vueblocks/vue-use.git"
+    "url": "git+https://github.com/vueblocks/vue-use-utilities.git"
   },
@@ -40,3 +40,3 @@ "keywords": [
   },
-  "gitHead": "a3b871c1cb59c735b7998f72801c68e44623c959"
+  "gitHead": "e81acf6697df456ae523f0817d770cec69c5bf5a"
 }

README.md

@@ -8,3 +8,11 @@ # @vueblocks/vue-use-vuex
 ```bash
-yarn add @vueblocks/vue-use-vuex
+# Vue 2 with @vue/composition-api
+yarn add @vue/composition-api @vueblocks/vue-use-vuex -S
+or
+npm i @vue/composition-api @vueblocks/vue-use-vuex -S
+
+# Vue 3
+yarn add @vueblocks/vue-use-vuex -S
+or
+npm i @vueblocks/vue-use-vuex -S
 ```
@@ -16,50 +24,30 @@
 
-It export these utilities:
+It export these composable helpers:
 
-* useState
-* useGetters
-* useMutations
-* useActions
+* [useState](./useState.md) - same as `mapState` helper in Vuex
+* [useGetters](./useGetters.md) - same as `mapGetters` helper in Vuex
+* [useMutations](./useMutations.md) - same as `mapMutations` helper in Vuex
+* [useActions](./useActions.md) - same as `mapActions` helper in Vuex
 
-### useState
+Differently, `useVuex` do not export `createNamespacedHelpers` function, Instead `useVuex` allow you provide
+the namespace as first argument, then return will be the namespaced component binding helpers.
 
-```js
-import { useVuex } from '@vueblocks/vue-use-vuex'
+Read more about namespacing [documention](./namespacing.md).
 
-export default {
-  ...
-  setup () {
-    const { useState } = useVuex()
+It seems familiar right?
 
-    // 写法1: 传字符串参数 'language' 等同于 `state => state.language`
-    const localState = useState('global', {
-      theme: 'theme',
-      lang: 'lang'
-    })
+## Typing
 
-    // 写法2: 箭头函数可使代码更简练
-    const localState = useState('global', {
-      theme: state => state.theme,
-      lang: state => state.lang
-    })
-
-    // 写法3: 常规函数用于计算，等同于箭头函数
-    const localState = useState('global', {
-      customTheme (state) {
-        return 'custom' + state.theme
-      }
-    })
-
-    // 写法4: 直接映射节点名称相同的计算属性
-    const localState = useState('global', [
-      'theme',
-      'lang'
-    ])
-  }
-  ...
-}
+```ts
+/**
+ * Use Vuex with composition api easily. Both support Vue2.x / Vue3.x
+ * @param {String} namespace
+ * @param {Store} store ### vm.$store
+ */
+declare function useVuex(namespace?: string, store?: Store<any>): {
+  useState: (namespace?: string, map: Array<string> | Object<string | function>) => Object<ComputedRef>
+  useGetters: (namespace?: string, map: Array<string> | Object<string>) => Object<ComputedRef>
+  useMutations: (namespace?: string, map: Array<string> | Object<string | function>) => Object
+  useActions: (namespace?: string, map: Array<string> | Object<string | function>) => Object
+};
 ```
-
-## License
-
-MIT [@xiaoluoboding](https://github.com/xiaoluoboding)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41727

87.12%

Number of package files

9

12.5%

Lines of code

893

92.46%

Worsened metrics

Number of lines in readme file

52

-18.75%

Number of low supply chain risk alerts

12

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes