getters以及mutation的用法，vue3.0代码实现

在 Vue 3.0 中，我们可以使用 `setup()` 函数来定义组件的逻辑。在该函数中，可以使用 `reactive`、`computed`、`watch` 等函数创建响应式数据、计算属性、监听数据变化等。

对于 `getters` 和 `mutation`，我们可以使用 `computed` 和 `methods` 来实现。

下面是一个示例代码：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    const increment = () => {
      state.count++;
    };

    const doubleCount = computed(() => {
      return state.count * 2;
    });

    return {
      count: state.count,
      doubleCount,
      increment,
    };
  },
};
</script>

在上面的代码中，我们使用 `reactive` 创建了一个响应式对象 `state`，其中包含了一个属性 `count`，并使用 `increment` 方法来修改 `count` 的值。

使用 `computed` 来创建一个计算属性 `doubleCount`，它的值是 `count` 的两倍。

最后，我们将 `count`、`doubleCount` 和 `increment` 方法返回，以便在模板中使用。

在模板中，我们可以像使用普通的属性和方法一样使用它们：

<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="increment">Increment</button>

这里我们展示了如何使用 `computed` 创建 `getters`，使用 `methods` 创建 `mutation`。

当然，对于更复杂的应用场景，我们也可以使用 Vuex 来管理状态。