vuex的基本用法（Vuex入门核心概念2.Getter）
vuex的基本用法（Vuex入门核心概念2.Getter）import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { company: '京东' department: '技术与数据中台' position: '软件开发工程师' } getters: { getSummary: state => { return state.company '·' state.position } getDetail: state => { return state.company '-'
GetterGetter用于对Store中的数据进行加工处理形成新的数据
它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变
mapGetters映射 store 中的 Getters 到当前组件中，以便直接调用。
示例store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
company: '京东'
department: '技术与数据中台'
position: '软件开发工程师'
}
getters: {
getSummary: state => {
return state.company '·' state.position
}
getDetail: state => {
return state.company '-' state.department '-' state.position
}
}
})
LinHongcun.vue
<template>
<div>
<div>
{{$store.getters.getSummary}}
</div>
<div>{{getDetail}}</div>
</div>
</template>
<script>
import {
mapState
mapMutations
mapActions
mapGetters
} from 'vuex'
export default {
computed: {
...mapGetters(['getDetail'])
}
}
</script>
<style>
</style>
效果
