Vue Simple Store!
So, What is it?
Vue Simple Store is a vue plugin which will simplify your App Store. It will combine your separated stores into one global store.
Why am I need it?
Once your App become large and has many stores in it, you probably have inconvenience to import your stores one by one. And you might keep repeating that thing in all your component script. In my opinion, it is not efficient way to use the stores of the App. How do you think if you only need to import all your stores once, then use it in everywhere?
Sounds good. Well, What does Vue Simple Store do with all my stores?
Not a big thing. Vue Simple Store just try to help you to organize your stores then serves a simple API such as, state and $action. No More.
Stop talking and give me a code!
Hhhmm... Oke, let's give it a try!
Installation
You need to prepare your stores first.
cart.js
// Make a store for the "cart"
export default {
// You must define the name of the individual store
name: "cart",
// The state of the cart
state: {
items: []
},
/**
All actions to mutate the cart state
*/
add_item(item){ // Add an item to the cart
this.state.items.push(item)
}
}
Repeat it to make a user store
user.js
// Make a store for the "user"
export default {
// You must define the name of the individual store
name: "user",
// The state of the user
state: {
toBePaid: 0
},
/**
All actions to mutate the user state
*/
buy_item(product){ // Add the amount to be paid
this.state.toBePaid += product.price
}
}
Now we've just make a all the needed stores. But we haven't yet installed it to our Vue App. Let's install it.
main.js
import Vue from 'vue'
/**
The Final step,
Put all stores to Vue Simple Store
*/
// Import the libraries
import VueSimpleStore from './vue-simple-store.js'
import cartStore from './cart.js'
import userStore from './user.js'
// Install it!
Vue.use( VueSimpleStore, {
stores: [ cartStore, userStore ]
})
// App Component
import App from './App.vue'
// Mount The App
new Vue({
el: 'body',
components: { App }
})
We have state and $action Methods now! So, let's have fun with the Vue app!
App.vue
<template>
<div>
<h1>Vue Simple Store Demo</h1>
<p>Your Cart: {{ state.cart.items.length }} items</p>
<p>To Be Paid: ${{ state.user.toBePaid }}</p>
<h3>Pick a product Here</h3>
<ul>
<li v-for="product in products">
<a href="#" @click.prevent="buy(product)">
{{ product.name }}
</a>
<span>- ${{ product.price }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
products: [
{ name: "Swag Bag", price: 40 },
{ name: "Casual Shirt", price: 20 }
]
}
},
methods:{
buy(product){
this.$action('cart:add_item',product)
this.$action('user:buy_item',product)
}
}
}
</script>
How do you think? Is it good enough? You can try the working code above here
How about the API?
Vue Simple Store will provide you state, and $action Only.
The API:
state
The state will provide you the global states which is the result of combining all your stores.
// declare New Store
var cartStore = {
name: "cart"
state: {
msg: "Your Cart Is Empty"
}
};
// Once you install the Vue Simple Store you will get global states in your VM
this.state.cart.msg; // "Your Cart Is Empty"
The name format of the state is this.state.{store.name}.{state}
$action
The $action will connect you to your store actions. It will trigger up your store action.
// declare New Store
var cartStore = {
name: "cart"
state: {}
some_action(singleArgument){
console.log("You've Just triggered Me!")
}
};
// Once you install the Vue Simple Store you can trigger that event via your VM
this.$action('cart:some_action', singleArgument);
// You've Just Triggered Me!
The action only can pass a single argument to your store actions. The name format of the state is this.$action({store.name}:{store.action}, singleArgument). All those things probably can make you easier to organize your stores, instead of import it one by one.
Options
Vue Simple Store have some installation options and their default value.
Vue.use(VueSimpleStore,{
stores: [] // put your stores here
debug: true, // always log your actions
});
Done!