@websanova/vue-store
v1.0.5-beta
Published
A simple, light weight and intuitive store utility for Vue.js.
Downloads
3
Readme
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
andparseErrorResponse
options for parsing the responses. NOTE: This uses thehttp
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}];