在vuex发起登录全组件共享用户数据和辅助函数

1. 在点击登录按钮的事件中传用户名和密码 this.$store.dispatch("函数名"，参数)

注意：参数只能传一个如果传多个可以用对象传

 login() {
        this.$refs.form.validate(async valid => {
           if (valid) {
            // 通过vuex发送请求 参数传给actions
            this.$store.dispatch("userLogin",{
              account : this.form.username,
              password : this.form.password
       })

2.在store中vuex里actions发起登录请求

异步请求只能在actions里面操作，想要修改state需要commit到mutations里面改

注意：只有mutations修改state

 mutations: {
    userLogin(state,payload){  
      console.log("登录成功");
        //修改state的值
      state.userName = payload.account;
      state.token = payload.token;
    }
  },
  // actions:同步异步都可以在actions中进行,但异步操作只能在actions中进行 actions中的方法可以调用mutations中的方法
  actions: {
    // 登录 
   async userLogin(store,payload){
      // 参数
      console.log("payload=>",payload);
      // 发起Login请求
      let res = await getLogin(payload.account,payload.password)
      // console.log("res=>",res);
      store.commit("userLogin",res)
    }
  },

测试：

也可以使用开发者工具查看

 

3.取值 主页获取用户姓名 通过计算属性

  computed: {
        username(){
          return this.$store.state.userName
        }
      },