This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const store = new Vuex.Store({ | |
state: { | |
score: 0 | |
} | |
}) | |
const ScoreDashboard = { | |
template: `<div>{{ score }}</div>`, | |
computed: { | |
score () { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const store = new Vuex.Store({ | |
state: { | |
score: 0 | |
}, | |
mutations: { | |
SET_SCORE (state, value) { | |
state.score = value | |
} | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const store = new Vuex.Store({ | |
state: { | |
score: 0 | |
}, | |
mutations: { | |
SET_SCORE (state, value) { | |
state.score = value | |
} | |
}, | |
actions: { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Vue from 'vue' | |
import Vuex from 'vuex' | |
import Axios from 'axios' // For the example only | |
Vue.use(Vuex) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const store = new Vuex.Store({ | |
state: { | |
score: 0 | |
}, | |
mutations: { | |
SET_SCORE (state, value) { | |
state.score = value | |
} | |
}, | |
actions: { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const ScoreDashboard = { | |
template: `<div>{{ score }}</div>`, | |
computed: { | |
score () { | |
return this.$store.state.score | |
} | |
}, | |
mounted () { | |
this.$store.dispatch('setScore', 10) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const app = new Vue({ | |
el: '#app', | |
// provide the store using the "store" option. | |
// this will inject the store instance to all child components. | |
store, | |
components: { ScoreDashboard }, | |
template: ` | |
<div class="app"> | |
<ScoreDashboard></ScoreDashboard> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { mapGetters, mapActions } from 'vuex' | |
const store = new Vuex.Store({ | |
state: { | |
score: 0 | |
}, | |
mutations: { | |
SET_SCORE (state, value) { | |
state.count += value | |
} |