Vuex拿到state中数据的3种方式与实例剖析

来详细讲解“Vuex拿到state中数据的3种方式与实例剖析”。

1. 3种获取state数据的方式

Vuex中，我们可以通过以下3种方式来获取state中的数据：

1.1 在组件中通过$store.state.xxx获取

通过在组件中访问$store.state.xxx，可以获取到store中某个模块的state数据，举个例子：如果我们想拿到store中名称为“user”的模块的state数据，可以在组件中这样写：

this.$store.state.user.xxx

其中xxx为该模块中state中的属性名。

1.2 在组件中通过mapState函数获取

mapState函数是Vuex提供的一种简化获取state数据的方法，可以将该模块下的若干个属性“映射”到组件的计算属性中。使用mapState，我们只需要在组件中引入该函数，并在计算属性中声明需要“映射”的属性即可。举个例子：如果我们想拿到store中名称为“user”模块的state数据中的username属性和password属性，可以在组件中这样写：

import { mapState } from 'vuex'
...
computed: {
  ...mapState('user', ['username', 'password'])
}

这样，在该组件中，我们便可以通过this.username和this.password来访问store中该模块的对应属性值。

1.3 在组件中通过getters获取

getters是Vuex中的计算属性，它的作用是对state中的数据进行二次处理，返回一个新的值。我们可以在getters中声明处理state中数据的方法，并在组件中访问该方法来获取数据。举个例子：如果我们想通过获取store中名称为“user”的模块的state数据来获取一个用户的当前状态信息，那么我们可以这样写：

在store文件中：

const state = {
  user: {
    status: 'online', // 当前在线状态
    username: 'vuejs', // 用户名
    ...
  }
}
const getters = {
  currentStatus: state => state.user.status
}

这里声明了一个获取用户当前状态的getters方法，接着在组件中访问这个方法：

import { mapGetters } from 'vuex'
...
computed: {
  ...mapGetters('user', ['currentStatus'])
}

通过这样的方法，我们便可以在组件中通过this.currentStatus获取到该用户的在线状态信息了。

2. 示例说明

上述3种方法只是比较简单的介绍，下面通过两个实际的代码示例来说明。

2.1 示例1

该示例为在Vue组件中获取store中的数据：

<template>
  <div>
    <h2>{{ username }}的个人资料</h2>
    <p>电话：{{ phone }}</p>
    <p>地址：{{ address }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      username: state => state.user.username,
      phone: state => state.user.phone,
      address: state => state.user.address
    })
  }
}
</script>

这里使用了mapState来将store中的state数据映射到了当前组件的计算属性中，从而在组件中访问任何一个state数据只需要使用this.xxx即可。

2.2 示例2

该示例为在store的getters方法中对数据进行二次处理：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    addTen(state) {
      return state.count + 10
    },
    double(state) {
      return state.count * 2
    }
  }
})

这里声明了两个getters方法，一个是addTen方法，在原始count值上加10；另一个是double方法，在原始count值上乘以2。对于这两个方法的调用，在组件中使用$store.getters.addTen和$store.getters.double即可。