JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="http://halzhan.github.io/kiss-vuex/static/dist/kiss-vuex.min.js"></script>
<div id="app"></div>
TypeScript
const Vue = window.Vue;
const Vuex = window.Vuex;
const { Store } = window.KissVuex;
@Store
class AppStore {
counter = 0;
timeStamps = [];
info = {
counter: 0
};
}
const appStore = new AppStore();
Vue.component("app-decorator", {
computed: {
counter() {
return appStore.counter;
},
timeStamps() {
return JSON.stringify(appStore.timeStamps);
},
timeInfo() {
return JSON.stringify(appStore.info);
}
},
template: `
<div>
<h1>Decorator Usage</h1>
<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() {
const date = new Date();
appStore.counter++;
appStore.timeStamps.push(date);
appStore.info.counter++;
appStore.info[appStore.counter] = date.valueOf();
}
}
});
new Vue({
el: "#app",
template: `<div><app-decorator></app-decorator></div>`
});