如何将Vue页面复用方法迁移至Vuex store并解决调用失效问题

现有代码的核心问题 #

• Vuex action中无法通过this访问Vue实例挂载的$http、$router属性，也不能直接通过this.user访问store的state
• Vuex规定所有state修改必须通过mutation提交，不能直接在action中对state.user.loading赋值
• 原store代码存在语法错误：mutations、actions块的闭合符号错误使用了)，应改为}

修复步骤 #

1. 新增修改loading状态的mutation

在mutation-types.js中新增loading的类型常量后，在store的mutations中添加对应逻辑：

export const mutations = {
  [mutationTypes.SET_USER]: (state, payload) => {
    state.user = payload
  },
  // 新增loading修改逻辑
  [mutationTypes.SET_USER_LOADING]: (state, loading) => {
    state.user.loading = loading
  }
}

2. 修复action逻辑

首先导入项目中的http、router实例（替换为你项目中实际的导出路径），再修改getUser的实现：

// 头部导入依赖
import http from '@/utils/request'
import router from '@/router'

export const actions = {
  setUser: ({ commit }, payload) => {
    commit(mutationTypes.SET_USER, payload)
  },
  // 修复后的getUser逻辑
  getUser: async ({ commit }) => {
    commit(mutationTypes.SET_USER_LOADING, true)
    try {
      const res = await http.post('/ajax/settings/settings_read.php')
      if (res.data.errorid === '0') { 
        const payload = res.data.user
        commit(mutationTypes.SET_USER, payload)
      } else {
        router.push('/auth/login').catch(() => {})
      }      
    } catch(e) {
      console.log(e)
    } finally {
      commit(mutationTypes.SET_USER_LOADING, false)
    }
  }
}

3. 页面调用（可选支持异步等待）

如果需要等接口返回后再执行后续逻辑，可添加async/await：

import { mapActions } from "vuex"

export default {
  methods: {
    ...mapActions(['getUser'])
  },
  async created(){
    await this.getUser()
    // 其他依赖用户信息的逻辑可写在这里
  }
}

内容的提问来源于stack exchange，提问作者Joe