Vuex 获取login用户名到main

1.安装    npm install vuex --save

2.新建store   index.js

3.import Vuex from ’vuex‘

4.

// 全局对象，用于保存所有组件的公共数据，类似 数据库

const state ={

    user:{

        name:''

    }

};

 

// 监听state对象的值的最新状态（计算属性）  取值

const getters={

    getUser(state){

        return state.user;

    }

};

// 唯一一个可以修改state值的方法(同步执行)

const mutations={

    updateUser(state,user){

        state.user = user;

    }

};

// 异步执行mutations方法   context上下文的意思  指上面的mutations  

const actions={

    asyncUpdateUser(context,user){

        context.commit("updateUser",user);

    }

};

//配置完  暴露出去

export default new Vuex.Store({

        state,

        getters,

        mutations,

        actions,

});

5.login

表单验证 用户名 存储对象

this.$store.dispatch("asyncUpdateUser",{name:this.form.name});

6.main导入

{{$store.getters.getUser.name}}