vuex的使用之mapActions

vue项目中，经常会使用到vuex，vuex是vue的一个状态管理。

本文简单总结一下：vuex中mapActions的使用。

如果一个方法或多个方法需要在多个页面和组件中使用，那么，可以使用mapActions。

一.vuex中声明变量个方法

1.在store/module/user.js中接口引入

import { login, logout, getUserInfo } from '@/api/user'

2.在mutations中书写方法：

actions: {
 // 登录
    handleLogin ({ commit }, {userName, password}) {
      userName = userName.trim()
      return new Promise((resolve, reject) => {
        login({
          userName,
          password
        }).then(res => {
          const data = res.data
          commit('setToken', data.token)
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 退出登录
    handleLogOut ({ state, commit }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('setToken', '')
          commit('setAccess', [])
          resolve()
        }).catch(err => {
          reject(err)
        })
        // 如果你的退出登录无需请求接口，则可以直接使用下面三行代码而无需使用logout调用接口
        // commit('setToken', '')
        // commit('setAccess', [])
        // resolve()
      })
    },
    // 获取用户信息
    getUserInfo ({ state, commit }) {
      return new Promise((resolve, reject) => {
        try {
          getUserInfo(state.token).then(res => {
            const data = res.data
            commit('setAvator', data.avator)
            commit('setUserName', data.name)
            commit('setUserId', data.user_id)
            commit('setAccess', data.access)
            commit('setHasGetInfo', true)
            resolve(data)
          }).catch(err => {
            reject(err)
          })
        } catch (error) {
          reject(error)
        }
      })
    }
  }
 }
 

二.在各页面中使用

1，引入

  import { mapActions } from 'vuex'

2，在method里

  ...mapActions([
      'handleLogOut'
    ]),

或多个方法

...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),

3，当前页面方法中调用

  handleSubmit ({ userName, password }) {
      this.handleLogin({ userName, password }).then(res => {
        this.getUserInfo().then(res => {
          this.$router.push({
            name: this.$config.homeName
          })
        })
      })
    }