import { mapState, mapMutations } from 'vuex'

当您在Vue组件中使用mapState和mapMutations时，需要先从Vuex库中导入这两个辅助函数。

首先让我们看看如何在Vue组件中使用mapState。

从Vuex中导入mapState辅助函数：

import { mapState } from 'vuex'

在Vue组件的computed对象中使用mapState辅助函数。您可以传递一个数组或对象给mapState，来指定您想将哪些Vuex状态映射到您组件的计算属性中。
使用数组：

computed: {
  ...mapState(['state1', 'state2'])
}

在这个例子中，state1和state2是您在Vuex存储中的状态的名称。现在，您可以通过this.state1和this.state2在您的组件中访问这些状态。

使用对象：

computed: {
  ...mapState({
    alias1: 'state1',
    alias2: 'state2'
  })
}

在这个例子中，alias1和alias2是您为state1和state2创建的别名。通过这样的配置，您可以在组件中通过this.alias1访问state1，通过this.alias2访问state2。

现在让我们看看如何在Vue组件中使用mapMutations。

从Vuex中导入mapMutations辅助函数：

import { mapMutations } from 'vuex'

在Vue组件的methods对象中使用mapMutations辅助函数。您可以传递一个数组或对象给mapMutations，来指定您想将哪些Vuex mutations映射到您组件的方法中。
使用数组：

methods: {
  ...mapMutations(['mutation1', 'mutation2'])
}

在这个例子中，mutation1和mutation2是您在Vuex存储中的mutations的名称。现在，您可以通过this.mutation1()和this.mutation2()在您的组件中调用这些mutations。

使用对象：

methods: {
  ...mapMutations({
    alias1: 'mutation1',
    alias2: 'mutation2'
  })
}

在这个例子中，alias1和alias2是您为mutation1和mutation2创建的别名。通过这样的配置，您可以在组件中通过this.alias1()调用mutation1，通过this.alias2()调用mutation2。

使用mapState和mapMutations，您可以轻松地连接您的组件和Vuex存储，并访问其状态和mutations。