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

Comparing version 0.1.7 to 0.1.8

lib/index.cjs.js

@@ -0,1 +1,6 @@
+/*!
+ * @vueblocks/vue-use-vuex v0.1.8
+ * (c) 2020 xiaoluoboding
+ * @license MIT
+ */
 'use strict';
@@ -2,0 +7,0 @@

lib/index.esm.js

@@ -1,8 +0,11 @@
-import { getCurrentInstance, computed } from 'vue-demi';
+/*!
+ * @vueblocks/vue-use-vuex v0.1.8
+ * (c) 2020 xiaoluoboding
+ * @license MIT
+ */
+import { computed, isVue3, getCurrentInstance } from 'vue-demi';
 
-// import { Store } from 'vuex/types'
-// import { isObject, isNull } from 'lodash'
-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);
+
 /**
@@ -13,114 +16,169 @@ * Validate whether given map is valid or not
  */
-const isValidMap = (map) => Array.isArray(map) || isObject(map);
-const getStoreFromInstance = () => {
-    const vm = 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 vm.$store;
-};
-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()
-    let result = {};
-    for (let 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] = 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 computedGetter = (store = null, namespace, prop) => {
-    if (!store)
-        store = getStoreFromInstance();
-    return computed(() => store.getters[prop]);
+/**
+ * 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 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() {
-        const args = arguments;
-        return store.commit.apply(store, [type, ...args]);
-    };
-};
-const getActions = (store = null, namespace, action) => {
-    if (!store)
-        store = getStoreFromInstance();
-    return function mappedAction() {
-        const args = arguments;
-        return store.dispatch.apply(store, [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] = 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;
 };
@@ -132,22 +190,43 @@ /**
  */
-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 = getCurrentInstance();
+    if (!vm) {
+        console.error('You must use this function within the "setup()" method');
+    }
+    return 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;
+}
 
-export { useVuex };
+export { createNamespacedHelpers, useActions, useGetters, useMutations, useState, useVuex };

lib/index.umd.js

@@ -0,1 +1,6 @@
+/*!
+ * @vueblocks/vue-use-vuex v0.1.8
+ * (c) 2020 xiaoluoboding
+ * @license MIT
+ */
 (function (global, factory) {
@@ -2,0 +7,0 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue-demi')) :

package.json

 {
   "name": "@vueblocks/vue-use-vuex",
   "description": "Use Vuex With Composition API Easily.",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "lib/index.cjs.js",
@@ -39,3 +39,3 @@ "types": "lib/index.d.ts",
   },
-  "gitHead": "e81acf6697df456ae523f0817d770cec69c5bf5a"
+  "gitHead": "cc5e359b72aeb8372b6c5b76d091549b30a8ce1e"
 }

Fixed 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

Improved metrics

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

36637

-12.2%

Number of package files

8

-11.11%

Lines of code

759

-15.01%

No dependency changes