VUE-vuex 用户登录信息的数据写入与获取方式

今天，长沙网络推广要为大家分享一篇关于Vue和Vuex框架下用户登录信息的数据写入与获取方式的文章。这篇文章不仅技术实用，还为大家提供了宝贵的经验。希望大家跟随长沙网络推广的步伐，一同了解这篇文章的核心内容。

一、整体思路

在用户登录的过程中，首先通过前台获取用户数据，然后向后台发送post请求进行验证。验证成功后，将用户数据以及登录状态保存到Vuex的状态管理库（state）中。这样，多个页面就可以通过调用`this.$store.getters.getuname`来获取state中的用户信息。

二、向后端发送请求并写入状态

在login.vue页面中，首先通过`getUserInfo(this.uname,this.pwd)`获取用户信息。如果返回的用户名和密码验证成功（`this.loginData.res==1`），则通过`this.$store.dispatch('setLogin', true)`将数据写入状态。我们还可以将用户的账号（例如手机号）通过`this.$store.dispatch('setAount',this.loginData.obj.phone )`写入状态。

三、在state中存储数据

在action.js文件中，我们定义了`setAount`方法，并通过提交mutation来修改状态。具体的mutation定义在mutation.js文件中，例如`SET_ACCOUNT (state, platform)`用于设置用户的账号信息。

四、创建获取state中数据的getter方法

在getter.js文件中，我们定义了`getuname`方法，用于获取状态中保存的账号信息。这样，在任何需要使用到用户账号信息的页面，都可以通过`this.$store.getters.getuname`来获取数据。

五、在页面中调用getter方法获取数据

在homepage.vue或任何需要使用用户账号信息的页面，我们可以通过`console.log( this.$store.getters.getuname)`来打印出用户的账号信息。

以上就是长沙网络推广分享的关于Vue和Vuex框架下用户登录信息的数据写入与获取方式的全部内容。希望能给大家一个明确的指导，也希望大家能够支持狼蚁SEO。在实际开发中，可以根据这个思路进行实践，不断优化和完善代码。让我们共同期待更多的技术分享和经验交流！

注：以上内容仅作为参考，实际开发中需要根据项目需求进行相应的调整和优化。