Skip to content
Permalink
Browse files
docs(example): simplify example
  • Loading branch information
ktsn committed Oct 9, 2018
1 parent 3d1634b commit b2629cd5507f49bc76378e572e3dbeecc388b566
Showing with 27 additions and 48 deletions.
  1. +25 −19 example/src/App.vue
  2. +0 −1 example/src/main.ts
  3. +2 −28 example/src/store.ts
@@ -7,13 +7,15 @@
<p>computed msg: {{ computedMsg }}</p>
<Hello ref="helloComponent" />
<World />
<button @click="greet">Greet</button>

Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">Increment if odd</button>
<button @click="incrementAsync">Increment async</button>
<p>
<button @click="greet">Greet</button>
</p>

<p>
Clicked: {{ count }} times
<button @click="increment">+</button>
</p>
</div>
</template>

@@ -22,7 +24,7 @@ import Vue from 'vue'
import Component from '../../lib/index'
import Hello from './components/Hello.vue'
import World from './components/World'
import { mapGetters, mapActions } from 'vuex'
import { mapState, mapMutations } from 'vuex'
// We declare the props separately
// to make props types inferable.
@@ -37,14 +39,13 @@ const AppProps = Vue.extend({
Hello,
World
},
// mapGetters & mapActions example
computed: mapGetters([
'evenOrOdd'
// Vuex's component binding helper can use here
computed: mapState([
'count'
]),
methods: mapActions([
'increment',
'decrement',
'incrementAsync'
methods: mapMutations([
'increment'
])
})
export default class App extends AppProps {
@@ -54,6 +55,16 @@ export default class App extends AppProps {
// use prop values for initial data
helloMsg: string = 'Hello, ' + this.propMessage
// annotate refs type
$refs!: {
helloComponent: Hello
}
// additional declaration is needed
// when you declare some properties in `Component` decorator
count!: number
increment!: () => void
// lifecycle hook
mounted () {
this.greet()
@@ -74,10 +85,5 @@ export default class App extends AppProps {
incrementIfOdd() {
this.$store.dispatch('incrementIfOdd')
}
// dynamic component
$refs!: {
helloComponent: Hello
}
}
</script>
@@ -2,7 +2,6 @@ import Vue from 'vue'
import App from './App.vue'
import store from './store'

// mount
new Vue({
el: '#app',
store,
@@ -1,5 +1,6 @@
import Vue from 'vue'
import Vuex, { ActionContext } from "vuex"
import Vuex from "vuex"

interface CounterState{
count: number
}
@@ -13,37 +14,10 @@ const state = {
const mutations = {
increment (state: CounterState) {
state.count++
},
decrement (state: CounterState) {
state.count--
}
}

const actions = {
increment: (context: ActionContext<CounterState, any>) => context.commit('increment'),
decrement: (context: ActionContext<CounterState, any>) => context.commit('decrement'),
incrementIfOdd (context: ActionContext<CounterState, any>) {
if ((context.state.count + 1) % 2 === 0) {
context.commit('increment')
}
},
incrementAsync (context: ActionContext<CounterState, any>) {
return new Promise((resolve) => {
setTimeout(() => {
context.commit('increment')
resolve()
}, 1000)
})
}
}

const getters = {
evenOrOdd: (state: CounterState) => state.count % 2 === 0 ? 'even' : 'odd'
}

export default new Vuex.Store({
state,
getters,
actions,
mutations
})

0 comments on commit b2629cd

Please sign in to comment.