One powerful library for using vuex more easily followed KISS principle, fast and tiny, the minified js file is just 3KB (1KB Gzipped)!
$ npm i -S kiss-vuex
Please ensure that you have installed vue and vuex firstly, because kiss-vuex is dependent on them.
kiss-vuex
supports the easiest way to create vuex's store. It just exports one function named "Store" and you can use it like below:
As a decorator, you just need to add it above the class statement.
import { Store } from "kiss-vuex";
@Store
class AppStore {
counter = 0;
timeStamps = [];
info = {
counter: 0
};
}
const appStore = new AppStore();
export { AppStore, appStore };
Note: You have to add plugins for supporting decorator usage to your babel.config.js or set compilerOptions.experimentalDecorators property true in the tsconfig.json file.
You have to install such below development dependencies firstly.
$ npm i -D @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
Then add such plugins to the .babelrc.js
, .babelrc
or babel.config.js
file.
module.exports = {
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: false }]
],
presets: [
[
"@babel/env",
{
modules: false
}
]
]
};
Set the property compilerOptions.experimentalDecorators true in the tsconfig.json file.
{
"compilerOptions": {
"experimentalDecorators": true
}
}
Import the store in the place where you want to use it.
import { appStore } from "./appStore";
import Vue from "vue";
export default Vue.component("app-opr", {
computed: {
counter() {
return appStore.counter;
},
timeStamps() {
return JSON.stringify(appStore.timeStamps);
},
timeInfo() {
return JSON.stringify(appStore.info);
}
},
template: `
<div>
<strong>Operate Area</strong>
<div><button @click="doClick()">Click me</button></div>
<div>
<strong>Show Area</strong>
<p>Click times: {{counter}}</p>
<p>Timestamps: {{timeStamps}}</p>
<p>timeInfo: {{timeInfo}}</p>
</div>
</div>
`,
methods: {
doClick() {
appStore.counter++;
appStore.timeStamps.push(new Date());
appStore.info.counter++;
appStore.info[appStore.counter] = date.valueOf();
}
}
});
As a common function, you can just pass object to it.
import { Store } from 'kiss-vuex';
const appStore = Store({
counter = 0,
timeStamps = []
});
export {
appStore
}
Then you can import the store in the place where you want to use it like above.
There are online examples you can also take a look at.
Enjoy using it and have fun :)