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-asr

v0.7.52

Published

* Version: 0.7.52 * License M.I.T. * [Online Documentation](https://vuex-asr.github.io/vuex-asr/) * author: Joris Wenting * email: [email protected] * [linkedIn](https://www.linkedin.com/in/joriswenting/). * [contribute](https://vuex-asr.github.io/vuex-a

Downloads

72

Readme

Vuex-ASR - Automated Store Resolution for Vue

Example TodoMVC app

For a quick overview of a full implementation of vuex-asr, take a look at the codesandbox todo-mvc-example or visit the git-repository.

install

You can install the package via NPM:

npm install vuex-asr

setup

In your (typically) main.js:

import Vue from "vue";
import App from "./App.vue";
import { Store } from "./vuex/store";
import VuexASR from "vuex-asr";

Vue.use(VuexASR);

new Vue({
  render: h => h(App),
  store: Store
}).$mount("#app");

and you're ready to use vuex-asr.

what is vuex-asr?

Vuex-asr removes the necessity to describe your vuex store bindings in the component's script. With vuex-asr you're able to bind state, getters, mutations and actions from the component's attributes\directives:

  • asr-bind-state
  • asr-bind-getters
  • asr-bind-mutations
  • asr-bind-actions

The plugin automatically resolves bindings and is able to map them from the component's attributes, allowing your component's code to become generic and independent from the Vuex store :sunglasses:.

vuex-asr provides full interactivity with vuex.

codesandbox examples

The step by step guide contains examples with codesandboxes so you could start right away with exploring the features, with no setup required.

tl;dr

generic components able to be stateful

With vuex-asr you could start developing your codebase with generic components (no bindings described in the component code) and hook them up to the vuex ecosystem, by the attribute of the component.

simple example

Assume you have a vuex store:

const Store = new Vuex.Store({
  state: {
    message: "This is a message in the Root of VUEX",
  }
});

With asr-bind-state you could bind the state item message like this:

<message-component asr-bind-state="message"/>

If you have your state item in a namespace you could bind it like this:

<message-component asr-bind-state="User/Settings/message"/>

If you have to alias your state item to match components name convention:

<message-component asr-bind-state="User/Settings/notifyMessage AS message"/>

This will bind the the state item notifyMessage, living in the namespace User/Settings, AS message to the <message-component>.

// MessageComponent.vue

<template>    
    <div class="some-markup">
        {{ message }}
    </div>
</template>

about reactivity

If User/Settings/notifyMessage updates in the store, the message in <message-component> will update too.

a more complex implementation

We could also use it to provide more complex components with store bindings:

    <some-component
      asr-bind-state="
        message, 
        USER/userObject AS user,
        PHOTOS/recentPhotos
        PHOTOS/likedPhotos"
      asr-bind-getters="
        PHOTOS/recentPhotos
        PHOTOS/likedPhotos"
      asr-bind-mutations="
        USER/setMessageUser
        PHOTOS/addNewPhoto"
      asr-bind-actions="
        PHOTOS/fetchNewPhotos"
    ></some-component>

In this case we bind state, getters, mutations and actions items to <some-component>.

Follow the step by step manual to get started it contains sandboxes, so no setup is required to try out all of the examples and fiddle around.

Update

30-12-2019: overwrite local variables with store bindings! Documentation will be updated soon with examples. 15-01-2019: update with some refactoring for better control flow, the test-suite/views/Sandbox.vue contains an example on how to overwrite data function properties.

The binding message:

        <example-message asr-bind-state="message"/>

Will overwite 'message' in the returned object in data and leaves the other attributes in it:

    // src/components/ExampleMessage.vue

    ...
           data() {
             return {
               message: "local Message",  // <-- this one
               firstName: "local firstName",
               lastName: "local lastName",
               somethingElse: "jahoeee, this is it!",
             }
           },
    ...