		# vue-store

		A simple light-weight Vue "store" alternative to `vuex`.
		The plugin has been moved:


		## Usage

		The plugin can be initialized with an initial set of values.

		```
		Vue.install(require('vue-store'))
		```

		Or

		```
		Vue.use(require('vue-store'), {
		users: require('./actions/users.js')
		...
		});
		```


		## Methods

		`set`

		Anything can be set whether it's a variable or function.

		```
		this.$store.set('some.key.value', 'value');
		```

		The `set` function can also be chained.

		```
		this.$store
		.set('some.key.value', 'value')
		.set('some.other.value', 'value')
		.run('some.func');
		```


		`get`

		Retrieve a value, if a function is stored, it will be returned. It will NOT be executed use `$store.run` to execute.

		```
		this.$store.get('some'); // Object
		this.$store.get('some.key'); // Object
		this.$store.get('some.key.value'); // String
		```

		`clr`

		A shorthand to set the value to to `undefined`.

		```
		this.$store.clr('some.key');
		```

		Can also be chained.

		```
		this.$store
		.clr('some.key')
		.clr('another.key')
		.set('new.val')
		.run('some.func');
		```

		`run`

		This is used to explicitly run a function stored in the store.

		```
		this.$store.run('some.func', data, cb);
		```

		`watch`

		Set a watch on any part of a value or object.

		```
		this.$store.watch('some.val', function (newVal, oldVal) {

		});
		```


		## Example

		Below is a full-ish example of the store in action.

		Require a user store on init:

		```
		Vue.use(require('vue-store'), {
		users: require('./actions/users.js')
		});

		```

		Our `users` file. We can store functions and variables here:

		```
		module.exports = {
		state: null,
		reset: function () {
		this.clr('users.status');
		this.clr('users.data');
		},
		fetch: function (data, cb) {
		this.$http.get('users', data, function (res) {
		this.$store.set('users.data', res.data);
		this.$store.set('users.status', 'sent');

		if (cb) { cb(res.data); };
		});
		}
		};
		```

		A sample of what a users component might look like:

		```
		<template>
		<div v-if="!$store.get('users.status')">
		Loading...
		</div>

		<div v-if="$store.get('users.status') === 'sent'" v-for="user in $store.get('users.data').data">
		{{ user._id }} \| {{ user.email }} \| <a v-on:click="loginAs(user)" href="javascript:void(0);">login as</a>
		</div>
		</template>

		<script>
		export default {
		data() {
		return {
		users: []
		};
		},
		watch: {
		users() {
		console.log('local users watch');
		}
		},
		created() {
		this.$store.run('users.reset');
		},
		ready() {
		var _this = this;

		this.$store.watch('users.data', function (newVal, oldVal) {
		console.log('store users.data watch');
		});

		this.$store.watch('users.data.data', function (newVal, oldVal) {
		console.log('store users.data.data watch');
		});

		_this.$store.run('users.fetch', {page: 1}, function (data) {
		_this.users = data;
		});
		}
		}
		</script>
		```
		* [https://github.com/websanova/vue-store](https://github.com/websanova/vue-store)
		* [https://www.npmjs.com/package/@websanova/vue-store](https://www.npmjs.com/package/@websanova/vue-store)

vue-store.js

vue-store - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics