Nightly Pocket Measurement

    @websanova/vue-store

    1.0.5-beta • Public • Published

    Vue Store

    A simple easy access store utility for Vue.js

    This is a simplified alternative to Vuex which doesn't require as much boostrapping or know how.

    This plugin makes the store more accessible through easy access methods like set, get, fetch, once, silent.

    Install

    $ sudo npm install @websanova/vue-upload

    Require in the project.

    import vueUpload from '@websanova/vue-upload';
    
    Vue.use(vueUpload);

    OR

    Vue.use(require('@websanova/vue-upload').default);

    Usage

    General

    Note that we can can access the store using Vue.store (no instance) or via a component instance with this.$store.

    When using http methods like fetch and once it will always return the promise from the given library (such as vue-resource or axios).

    Dot Notation

    The plugin supports dot notation for all methods.

    this.$store.set('users.list.one', 'hello');

    If we were to do a get on users we would get back an object.

    this.$store.get('users'); // {list: {one: 'hello'}}

    States

    When making a request with once, fetch or silent the request will set one of the following states.

    ready - on init or reset.

    loading - when making the request.

    loading-silent - when making the request in silent mode.

    success - response is successful.

    error - response is an error.

    Examples

    Fetching Data

    We could of course run an http call and have a simple store with just a set and get method. Methods like once and fetch just serve as nice little shortcuts to avoid this hassle.

    <template>
        <div>
            <div v-show="$store.isLoading('users.list')">
                Loading users...
            </div>
    
            <div v-show="!$store.isEmpty('users.list')">
                <ul>
                    <li v-for="user in $store.get('users.list')">
                        {{ user.name }}
                    </li>
                </ul>
            </div>
    
            <div v-show="$store.isEmpty('users.list')">
                No users found...
            </div>
    
            <div v-show="$store.isError('users.list')">
                Error fetching users...
            </div>
        </div>
    </template
    
        mounted() {
            this.$store.fetch('users.list', 'users');
        }

    Initializing

    It may be good practice to include the store plugin in an initial bootstrap and then create a "store" file or set of files to init. This would then serve to organize things a bit, but it's just an arbitrary way of organizing things.

    We could then have a store file.

    Vue.store.set('props', {
        auth: {
            loginRedirect: 'some/loing/route',
            logoutRedirect: some/logout/route
        },
    
        site: {
            logo: 'path/to/logo'
        }
    });
    
    Vue.store.set('users', {
        defaultAvatar: 'path/to/avatar'
    });

    We could then load some additional back-end properties on the main component boot.

    This would then automatically merge with our front end props.

    Using once also ensures this route will only ever get called once even if we make the call again.

        computed: {
            _loaded() {
                return this.$store.loaded('props');
            }
        },
    
        created() {
            this.$store
                .once('props')
                .then((res) => {
                    console.log(this); // proper context
                });
        }
    
        ...

    Methods

    set(name, data)

    Set a value in the store.

    Note: This will do a deep merge on the object overriding any existing values.

    this.$store.set('some.value.deep.inside', 'here');
    
    this.$store.set('some.value', {deep: {inside: 'here'}});

    get(name)

    Get a value in the store.

    this.$store.set('some.value.deep.inside', 'here');
    
    this.$store.get('some.value'); // {deep: {inside: 'here'}}

    reset(name, [url], [options])

    Reset the store value to null and clear out any states.

    this.$store.reset('some.value');
    
    this.$store.get('some.value'); // null
    

    fetch(name, [url], [options])

    Makes an http request, sets state and puts the response data into the store if successful.

    Note: This uses the parseSuccessResponse and parseErrorResponse options for parsing the responses. NOTE: This uses the http option for making http requests and should return the "promise" object.

    this.$store
        .fetch('some.data', 'some.url')
        .then(() => {
            console.log('success');
        }, () => {
            console.log('error');
        })

    Note that the second parameter is the url but we can also just pass an object there.

    this.$store
        .fetch('some.data', {
            url: 'some.url'
        });

    There are also too other optional options that can be set.

    this.$store
        .fetch('some.data', {
            url: 'some.url',
            silent: true
            response(res) { return res.data; }
        });

    silent - make a request without changing to a loading or loading-silent state. The request can then be made to appear as it's running in the background and only update the list in real time (without spinners, etc).

    response - set an alternate parsing to the default parseSuccessReponse option.

    silent(name, [url], [options])

    A shortcut for calling fetch with the silent option.

    this.$store
        .fetch('some.data', {
            url: 'some.url',
            silent: true
        });

    once(name, [url], [options])

    Ensures the requested url only gets called once.

    NOTE: Check fetch for more details on usage.

    this.$store.once('some.data', 'users');
    
    this.$store.once('some.data', 'users'); // Nothing happens
    
    this.$store.reset('some.data');
    
    this.$store.once('some.data', 'users'); // Works again

    state(name)

    Returns the state of the request on that object parameter.

    Check states under usage section for more information about states.

    NOTE: This is only meant to be used specifically on the object parameter the request was made on using once, fetch, etc.

    this.$store.fetch('some.data', 'some/url');
    
    this.$store.state('some.data'); // 'success'

    isEmpty(name)

    A helper method for checking if a given object is empty.

    NOTE: This is only meant to be used specifically on the object parameter the request was made on using once, fetch, etc.

    isReady(name)

    Shortcut method for checking "ready" state.

    isLoading(name)

    Shortcut method for checking "loading" state.

    isLoadingSilent(name)

    Shortcut method for checking "loading-silent" state.

    isSuccess(name)

    Shortcut method for checking "success" state.

    isError(name)

    Shortcut method for checking "error" state.

    loaded

    Alternate method to isSuccess for checking "success" state.

    NOTE: This is mainly for syntax sugaring as $store.loaded('props') just looks a bit nicer.

    errors

    Return errors from response formatted by parseErrorResponse option.

    Options

    http

    Set the http processor to use.

    By default assumes Vue.http via vue-resource.

    parseSuccessResponse

    Parse the success response.

    Default: return res.data.data

    parseErrorResponse

    Parse the error response.

    Default: return res.data.errors || [{rule: res.data.code, msg: res.data.msg}];

    Install

    npm i @websanova/vue-store

    DownloadsWeekly Downloads

    51

    Version

    1.0.5-beta

    License

    none

    Unpacked Size

    23.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • websanova