4d70170
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<html>
<body>
<script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@1.0.1/dist/vuex.js"></script>
<div id="app"></div>
<script>
const store = new Vuex.Store({
state: {
counter: 0
},
mutations: {
INCREMENT: state => state.counter++,
DECREMENT: state => state.counter--,
SET_COUNTER: (state, value) => state.counter = value
}
})
Vue.component('data-test', {
template: `<div>
{{ bool }} {{ text }} {{ number }}
</div>`,
data () {
return {
bool: false,
text: 'hello world',
number: 0
}
}
})
Vue.component('vuex-test', {
template: `<div>
<div>{{ counter }} {{ isMoreThanTwo }}</div>
<div>
<button @click="$store.dispatch('INCREMENT')">+1</button>
<button @click="$store.dispatch('DECREMENT')">-1</button>
<button @click="$store.dispatch('SET_COUNTER', 0)">Reset</button>
</div>
</div>`,
computed: {
counter () {
return this.$store.state.counter
}
},
vuex: {
getters: {
isMoreThanTwo: state => state.counter > 2
}
}
})
Vue.component('event-test', {
template: `<div>
<button @click="$emit('foo', 'bar')">Emit event</button>
<button @click="$dispatch('foo', 'meow')">Dispatch event</button>
<button @click="$broadcast('foo', 'waf')">Broadcast event</button>
</div>`
})
new Vue({
el: '#app',
store,
template: `<div id="app">
<data-test></data-test>
<vuex-test></vuex-test>
<event-test @foo="onFoo"></event-test>
</div>`,
methods: {
onFoo (value) {
console.log(value)
}
}
})
</script>
</body>
</html>
|
