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>
JavaScript
var appStore = KissVuex.Store({
counter: 0,
timeStamps: [],
info: {
counter: 0
}
});
Vue.component("app-function", {
computed: {
counter() {
return appStore.counter;
},
timeStamps() {
return JSON.stringify(appStore.timeStamps);
},
timeInfo() {
return JSON.stringify(appStore.info);
}
},
template:
'<div>'+
'<h1>Function 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: function() {
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-function></app-function></div>"
});