关于Vue的 Vuex的4个辅助函数

下面是对于“关于Vue的 Vuex的4个辅助函数”的详细攻略：

什么是 Vuex 辅助函数？

在进行 Vuex 的开发过程中，我们需要在组件中访问 Vuex 的 state，mutations 和 actions 等内容，常规的做法是在组件中使用 this.$store.state.myState 这种方式来访问。但是这样的方式不仅冗长而且繁琐，我们需要频繁的输入 this.$store 来访问状态或者直接调用 mutation 和 action。为了简化这些操作， Vuex 为我们提供了几个辅助函数来方便地访问 Vuex 的内容。

Vue.js Vuex 辅助函数

Vuex 提供了 4 个辅助函数用来简化对 Vuex 状态管理模式里面对 state、getters、mutations 和 actions 的访问。根据需要，你可以从 Vuex 中导入这些函数并传递其中所需的参数。

下面我们来看一下这四个函数的具体用法：

mapState

mapState 接收一个字符串数组或对象，用于从 Vuex 的 state 中映射多个计算属性。

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['user', 'company']),
  },
};

或者，你可以使用对象展开运算符来提供自定义别名：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      username: state => state.user.name,
      companyName: state => state.company.name,
    }),
  },
};

mapGetters

mapGetters 接收一个字符串数组或对象，用于从 Vuex 的 getters 中映射多个计算属性。

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getUserName', 'getCompanyName']),
  },
};

或者，也可以使用对象展开运算符来提供自定义别名：

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      username: 'getUserName',
      companyName: 'getCompanyName',
    }),
  },
};

mapMutations

mapMutations 接收一个字符串数组或对象，用于从 Vuex 的 mutations 中映射多个方法。

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['SET_USER', 'SET_COMPANY']),
  },
};

或者，也可以使用对象展开运算符来提供自定义别名：

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations({
      setUser: 'SET_USER',
      setCompany: 'SET_COMPANY',
    }),
  },
};

mapActions

mapActions 接收一个字符串数组或对象，用于从 Vuex 的 actions 中映射多个方法。

import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['getUser', 'getCompany']),
  },
};

或者，也可以使用对象展开运算符来提供自定义别名：

import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions({
      fetchUser: 'getUser',
      fetchCompany: 'getCompany',
    }),
  },
};

示例说明

下面我们来看两个简单的示例：

示例一

假设我们的 Vuex 存储了用户信息（username 和 age），我们需要从组件中展示用户名和年龄。使用 mapState 可以让我们在 computed 中方便地访问 state。

首先在我们的 Store 中定义 state：

const state = {
  user: {
    username: 'john',
    age: 25,
  },
};

然后在组件中使用 mapState 辅助函数访问 state：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      username: state => state.user.username,
      age: state => state.user.age,
    }),
  },
};

这样在组件中就可以通过 {{ username }} 和 {{ age }} 来展示用户名和年龄了。

示例二

假设我们的 Vuex 定义了一个 action fetchUserData，用于从服务器获取用户信息并更新 state 中的 user 对象。那么我们需要在组件中触发该 action，使用 mapActions 辅助函数可以帮助我们方便地触发 action。

首先在我们的 Store 中定义 action：

const actions = {
  async fetchUserData({ commit }) {
    const userData = await fetch('/user');
    const data = await userData.json();
    commit('setUser', data);
  },
};

然后在组件中使用 mapActions 辅助函数触发 action：

import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions({
      fetchData: 'fetchUserData',
    }),
  },
};

这样在组件中就可以通过 this.fetchData() 来触发 fetchUserData 操作了。

以上就是关于 Vue 的 Vuex 的 4 个辅助函数的完整攻略及示例说明。