如何从一个可重用的嵌套组件中修改我的Vuex的各个部分？

import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['state1', 'state2']),
  },
  methods: {
    ...mapMutations(['mutation1', 'mutation2']),
  },
};

<template>
  <div>
    <p>{{ state1 }}</p>
    <p>{{ state2 }}</p>
    <button @click="updateState">Update State</button>
  </div>
</template>

<script>
export default {
  computed: {
    state1() {
      return this.$store.state.state1;
    },
    state2() {
      return this.$store.state.state2;
    },
  },
  methods: {
    updateState() {
      this.mutation1('new value');
      this.mutation2('another value');
    },
  },
};
</script>

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    state1: 'initial value',
    state2: 'initial value',
  },
  mutations: {
    mutation1(state, payload) {
      state.state1 = payload;
    },
    mutation2(state, payload) {
      state.state2 = payload;
    },
  },
});

export default store;