如何在vuejs中使用具有计算属性的Vuex mapState

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

export default store;

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count', 'doubleCount']),
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
  },
};
</script>

// main.js
import Vue from 'vue';
import store from './store';
import MyComponent from './MyComponent.vue';

new Vue({
  store,
  render: (h) => h(MyComponent),
}).$mount('#app');