使用vuex的state状态对象的5种方式

使用 Vuex 的 state 状态对象的 5 种方式如下：

1. 直接在组件中读取

Vuex 的 state 状态对象保存了应用中大部分的共享状态，组件可以直接从 state 中读取数据。例如，我们有一个保存用户名的 state，在组件中可以这样读取：

<template>
  <div>
    {{ username }}
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    username: state => state.username,
  }),
};
</script>

这里使用了 Vuex 提供的 mapState 快捷工具，相当于在 computed 属性中声明一个函数，从 state 对象中提取数据，然后在模板中使用。

2. 辅助函数

除了读取 state 的数据，还有一些 Vuex 的辅助函数可以方便地处理 state 状态。例如：

import { mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    // 映射 store 中的 getters，可以直接调用
    ...mapGetters([
      'getUserName',
      'getAge',
    ]),
  },
  methods: {
    // 映射 store 中的 mutations，只能同步调用
    ...mapMutations([
      'updateUserName',
    ]),
    // 映射 store 中的 actions，可以异步调用
    ...mapActions([
      'getUserInfo',
    ]),
  },
}

这里使用了 Vuex 提供的三个辅助函数：mapGetters、mapMutations 和 mapActions 快捷工具，相当于在 computed 和 methods 属性中声明一些函数，方便调用 Vuex 的 getters、mutations 和 actions。

3. 使用带命名空间的辅助函数

如果将 Vuex 的 state 分模块组织，我们需要加上命名空间，在组件内部调用时必须标明模块的名称。例如：

import { mapState, mapActions } from 'vuex';

// users 模块的 state 对象
const usersState = {
  namespaced: true,
  state: {
    userList: [],
  },
  actions: {
    fetchUserList() {
      // 发起请求，获得用户数据
    },
  },
};

export default {
  computed: mapState('users', {
    userList: state => state.userList,
  }),
  methods: mapActions('users', [
    'fetchUserList',
  ]),
};

这里使用了带命名空间的 mapState 和 mapActions 快捷工具，使用 users 作为命名空间，方便地访问带命名空间的 state 和 actions。

4. 使用 $store.state 直接读取

组件也可以通过 $store.state 直接读取 state 对象的值。例如：

export default {
  computed: {
    username() {
      return this.$store.state.username;
    },
  },
  methods: {
    updateUsername(name) {
      this.$store.commit('updateUsername', name);
    },
  },
};

在 computed 属性中使用 $store.state.username 直接读取 state 对象的值；在 methods 中使用 $store.commit('updateUsername', name) 来调用 mutations，修改 state 的值。

5. 使用 Vuex 的辅助函数创建局部状态

如果有些组件的状态只在组件内使用，可以使用 Vuex 的辅助函数 createNamespacedHelpers 创建局部状态。例如：

import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions } = createNamespacedHelpers('users');

export default {
  computed: mapState({
    userList: state => state.userList,
  }),
  methods: mapActions([
    'fetchUserList',
  ]),
};

这里使用 createNamespacedHelpers 创建了命名空间为 users 的局部状态，并返回了 mapState 和 mapActions 辅助函数，用于访问和操作 users 模块的 state 和 actions。