lesson 210: add a vuex store
This commit is contained in:
parent
749591d4aa
commit
0a1432c828
|
@ -1,14 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<base-container title="Vuex"></base-container>
|
<base-container title="Vuex">
|
||||||
|
<the-counter></the-counter>
|
||||||
|
<button @click="increaseCounter">Add 1</button>
|
||||||
|
</base-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseContainer from './components/BaseContainer.vue';
|
import BaseContainer from './components/BaseContainer.vue';
|
||||||
|
import TheCounter from './components/TheCounter.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BaseContainer,
|
BaseContainer,
|
||||||
|
TheCounter
|
||||||
},
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
increaseCounter() {
|
||||||
|
this.$store.state.counter++;
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<h3>{{ counter }}</h3>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
counter() {
|
||||||
|
return this.$store.state.counter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,7 +1,9 @@
|
||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
|
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
|
import store from './store.js';
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
|
app.use(store);
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { createStore } from 'vuex';
|
||||||
|
|
||||||
|
const store = createStore({
|
||||||
|
state() {
|
||||||
|
return {
|
||||||
|
counter: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default store;
|
Reference in New Issue