getters
```html
<template>
<div class="about">
<h1>This is an about page</h1>
<button @click="getState">getState</button>
{{state}}
<h1>{{name}}-{{age}}</h1>
<hr>
<!-- test mapGetters -->
{{test}}
</div>
</template>
<script>
import {mapGetters, mapState} from "vuex"
export default {
data() {
return {
state: 0
}
},
computed: {
...mapState(["name", "age"]),
...mapGetters(["test"])
},
methods: {
getState() {
this.state = this.$store.state.count;
console.log(this.$store.state);
console.log(this.name);
console.log(this.age);
}
}
}
</script>
```
`store/index.js`
```javascript
import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex);
let state = {
count: 1,
name: "王哈哈",
age: 26
}
let getters = {
test() {
return store.state.name + "真棒！";
}
}
let store = new Vuex.Store({
state,
getters
})
export default store;
```
```main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from "./store"
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
store,
}).$mount('#app')
```