很多页面或者组件要调用vuex的state，怎么写最好啊？

Question

store我使用了2个模块，/store/index.js如下：

import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app';
import user from './modules/user';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    app,
    user
  }
});

export default store

/store/modules/app.js如下：

const app = {
  state: {
    skills: null //另外还有很多状态，在此例举一个
  },
  mutations: {},
  actions: {},
  getters:{}
}

export default app;

现在我是在所有页面或者组件的data里面直接引用状态，如

export default {
  data() {
    skills: this.$store.state.app.skills,
  }
}

这样可以用，但是合理么？

我试了一下在页面使用

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['skills']),
  },
}

这样好像比较符合规范，但是难道需要把states的所有属性都在getters全部写一次return？感觉很冗余啊？
特来请教，不胜感激。

Answer 1

用mapState？

Answer 2

使用mapGetters！