vuex新手进阶篇之取值

下面是关于“Vuex新手进阶篇之取值”的完整攻略。

1. 什么是Vuex

Vuex是一个专为Vue.js设计的状态管理架构，它采用集中式存储管理应用的所有组件的状态，可以轻松管理各个组件之间的状态共享。

2. 文章主题：Vuex的取值

在Vuex中，要取到状态（state）中的值，需要使用vuex提供的getters方法。

2.1 定义getters

getters是一个store对象上的属性，它可以是函数，并且可以接受任意参数。这里举例说明：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    //定义函数，接受state作为参数，返回计算后的值
    getCount: state => {
      return state.count + 10
    }
  }
})

2.2 使用getters

在组件中，可以通过this.$store.getters来访问定义的getter函数，也可以借助Vue实例的计算属性来访问。

下面是一个示例：

<template>
  <div>组件</div>
</template>

<script>
  export default {
    name: 'my-component',
    computed: {
      // this.$store.getters.getCount 也可以直接写成 getters.getCount
      getCount() {
        return this.$store.getters.getCount
      }
    }
  }
</script>

我们在computed计算属性中定义了一个getCount方法，返回的是getters中定义的getCount方法的值。在组件中，我们就可以使用this.getCount来获取状态值了。

2.3 在模块中使用getters

如果我们在Vuex中使用了模块化，那么在访问getter方法的时候需要多加一层模块的命名空间。

在模块中定义getters：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: {
    getAState: state => state.aState
  }
}

在组件中访问：

computed: {
  ...mapGetters('moduleA', [
    'getAState'
  ])
}

这里的mapGetters是一个辅助函数，它将moduleA中定义的getter路径自动映射为局部计算属性，映射后我们可以通过this.getAState访问到getter的值。

至此，我们就讲解了Vuex的取值功能，希望对你有所帮助。