Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dwqs/lue
:seedling: Vue and vuex based library, writing less verbose code.
https://github.com/dwqs/lue
vue-router vue-router-sync vue2 vuejs2 vuex vuex2
Last synced: 7 days ago
JSON representation
:seedling: Vue and vuex based library, writing less verbose code.
- Host: GitHub
- URL: https://github.com/dwqs/lue
- Owner: dwqs
- License: mit
- Created: 2017-08-27T11:00:51.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-09T14:02:57.000Z (over 6 years ago)
- Last Synced: 2024-09-23T04:32:22.511Z (11 days ago)
- Topics: vue-router, vue-router-sync, vue2, vuejs2, vuex, vuex2
- Language: JavaScript
- Homepage:
- Size: 236 KB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://standardjs.com) [](https://travis-ci.org/dwqs/lue)  
# lue
:seedling: Vue and vuex based library, writing less verbose code.
## Installation
Install the pkg with npm:
```
npm install lue --save
```
or yarn
```
yarn add lue
```
## Basic Uasage
#### 1. create a module
```js
// counter.js
export default {
namespace: 'counter',
state: {
count: 0,
title: 'Counter'
},
actions: {
increase ({dispatch, state}, payload) {
const val = state.count + 1;
// should be return a object to update state
// if return undefined or not a object, state won't be updated
return {
count: val
};
},
decrease ({dispatch, state}, payload) {
const val = state.count - 1;
return {
count: val
};
}
}
};
```
#### 2. export all modules as a object
```js
// modules/index.js
import counter from 'path/to/counter';
import other from 'path/to/other';
export default {
counter,
other
};
```
#### 3. create vue router options
```js
// options/index.js
const App = () => import(/* webpackChunkName: "app" */ 'path/to/app/index.vue');
const Counter = () => import(/* webpackChunkName: "counter" */ 'path/to/counter/index');
const Outer = { template: '' };
export default {
mode: 'history',
routes: [
{
path: '/',
component: Outer,
children: [
{ path: '', component: App },
{ path: 'counter', component: Counter },
// other config
]
}
]
}
```
#### 4. create your app
```js
import Vue from 'vue';
// path/to/index.js
import Lue from 'lue';
import modules from 'path/to/modules/index';
import routerOptions from 'path/to/options/index';
import filters from 'path/to/filter/index';
// 1. install plugin
Vue.use(Lue);
// 2. new a lue instance
const app = new Lue();
// 3. create store
app.createStore(modules);
// 4. init router
app.initRouter(routerOptions);
// 5. start your application
app.start('#app', {
// optional options object
filters,
// env/vue-i18n.etc
});
```
#### 5. combine lue with vue components
```js
{{title}}:
-
{{count}}
+
import { mergeActions, mergeProps } from 'lue';
export default {
computed: {
...mergeProps(['counter.count', 'counter.title'])
// or
// ...mergeProps({
// test: 'counter.title',
// })
},
methods: {
...mergeActions(['counter.increase', 'counter.decrease']),
add () {
this.increase();
},
sub () {
this.decrease();
}
}
}
```
## Lue Instance Properties
#### .store: Object
Vuex store instance.
#### .router: Object
Vue router instance.
#### .options: Object
Lue constructor options.
## Lue Instance Methods
#### .createStore(modules: Object, opts?: Object)
Create vuex store. See [opts](https://vuex.vuejs.org/en/api.html).
#### .initRouter(routerOptions: Object)
Init vue-router instance. See [routerOptions](https://router.vuejs.org/en/api/options.html)
#### .start(el: String, opts?: Object)
Start the app. See [opts](https://vuejs.org/v2/guide/instance.html#Creating-a-Vue-Instance) of creating a vue instance. `el` is a css selector for [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
## Examples
Running the examples:
```
npm install
npm run dev # serve examples at localhost:8000
```
## LICENSE
MIT