vuex模块化基础模板(登录)

src/store/modules/user.js

import { login } from '@/api/user'
// import { getToken, setToken, removeToken } from '@/utils/auth'
// import { resetRouter } from '@/router'

export default {
  namespaced: true,
  
  //state的两种写法
  // state: () => ({
  //   token: ''
  // }),
  state() {
    return {
      name: '',
      token: ''
    }
  },
  mutations: {
    setToken(state, payload) {
      state.token = payload
    }
  },
  actions: {
    asyncSetToken(store, data) {
      login(data).then(res => {
        console.log(res)
        store.commit('setToken', res.data)
      })
    }
  }
}

src/views/login/index.vue

 handleLogin() {
      //  兜底校验 通过组件身上的ref   1-拿到实例对象 2.对象身上的方法validate
      this.$refs.loginForm.validate(async(valid) => {
        if (valid) {
        // 登录
          this.$store.dispatch('user/asyncSetToken', this.loginForm)
        }
      })
    }

1. 调试 dev-tools

   调试：mutation函数 和 state数据俩者之间的关系
   在什么时间通过调用哪个muation函数 传入了什么参数 把state改成了什么
   

2. 注意事项

   vuex只管理数据 不要编写任何的其它业务逻辑代码