npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuex-module-builder

v1.0.2

Published

Easily create vuex modules with DRY code

Downloads

23

Readme

Vuex module builder

Vuex module builder is a wrapper for building vuex stores efficiently with DRY approach.

You can just supply your state and it will auto-generate getters for your state, actions for setting states and mutations for those actions.

It also adds some default states like fetching, deleting, creating, updating (with respective getters,actions and mutations) for loading conditions and offers a global reset action for restoring state to initial stage as well as reset for each state properties.

You also have the ability to overwrite any default behavior with your own code.

Installation

npm install vuex-module-builder

Example

-- todo.js [vuex module file]

import module_builder from 'vuex-module-builder';
import api from 'my-api';
const moule_config = {
    state: {
        todos:[],
    },
    actions:{
        fetch(store,payload){
            store.commit('set_fetching', true); //this mutations is auto generated by vuex-module-builder
                api.todos(payload)
                .then((response) => {
                    store.commit('set_fetching', false); //this mutations is auto generated by vuex-module-builder
                    store.commit('set_todos', response); //this mutations is auto generated by vuex-module-builder
                });
        },
    },
};
const store_module =  new module_builder(moule_config);
export default store_module;

with only the above code you'll get

namespaced = true (can not be modified by you at the moment)

state:

todos:[] //your code

fetching:false,

creating:false,

updating:false,

deleting:false,

mutations:

set_fetching

set_creating

set_updating

set_deleting

set_todos

reset

reset_todos

actions:

fetch //your code

set_fetching

set_creating

set_updating

set_deleting

set_todos

reset

reset_todos 

getters:

fetching

creating

updating

deleting

todos

You can always overwrite any state,mutation,action or getters as you like.