vuex获取state对象中值的所有方法小结(module中的state)

让我来为你详细讲解“vuex获取state对象中值的所有方法小结(module中的state)”的完整攻略吧。

一、简介

在Vuex中，state是一个数据源存储共享的数据。在Vuex的store中，state对象是唯一的。所以我们需要通过一些方式来获取和使用它。接下来，我将会为大家讲解在module中的state中，获取state对象的所有方法。

二、直接访问

我们可以直接访问state对象中的值。在vue组件中，可以通过组件的computed属性访问state对象中的值。下面是一个示例代码：

// 在vue组件中的使用方式
computed: {
  count () {
    return this.$store.state.count
  }
}

上面代码是在vue组件中直接访问store上的state对象，它可以获取store中的state对象，并通过computed属性将它映射到组件的数据中。

三、使用mapState辅助函数

mapState是Vuex提供的一个辅助函数，它帮助我们生成计算属性，其中的getters可以帮助我们更好的管理state对象。这个函数将state中的属性映射到组件的计算属性中，并且可以为其命名一个别名。

使用这个辅助函数需要先导入mapState：

import { mapState } from 'vuex'

接下来，我们可以使用mapState对state进行映射：

computed: {
  ...mapState({
    count: state => state.count,
    todos: state => state.todos
  })
}

上面这个代码块中，我们将count和todos两个属性进行了映射。此外，我们还可以通过传入对象的方式来实现同样的效果：

computed: {
  ...mapState({
    count: 'count',
    todos: 'todos'
  })
}

mapState的另一个用法是将组件的计算属性和组件的methods绑定在一起。我们同样可以使用对象的方式来绑定它们的名称：

methods: {
  ...mapState([
    'increment', 
    'decrement'
  ])
}

上面的代码片段将increment和decrement两个mutations映射到了组件的methods中，并用相同的名称绑定了它们。

总结

以上就是获取Vuex store中state对象的三种方法。第一种方法直接访问state对象，第二种方法是使用mapState辅助函数直接映射计算属性或方法，第三种方法是将组件的计算属性和methods绑定在一起。在实际开发中，我们可以根据自己的需求来选取最合适的方法。