UniApp实现个人中心与用户信息管理的实践方法

<template><view><text class="title">个人中心</text><view class="content"><text>{{ username }}</text><button>退出登录</button>    </view></view></template><script>  export default {    data() {      return {        username: '' // 用户名      }    },    methods: {      logout() {        // 退出登录逻辑      }    }  }</script><style>  .title {    font-size: 20px;    font-weight: bold;    margin-top: 20px;    text-align: center;  }  .content {    margin-top: 30px;    text-align: center;  }</style>

npm install --save vuex

// store/modules/user.jsconst state = {  userInfo: {} // 用户信息对象}const mutations = {  updateUserInfo(state, info) {    state.userInfo = info  }}const actions = {  setUserInfo({ commit }, info) {    commit('updateUserInfo', info)  }}export default {  state,  mutations,  actions}

// main.jsimport Vue from 'vue'import store from './store'import App from './App'Vue.prototype.$store = storeconst app = new Vue({  ...App})app.$mount()

<template><view><!-- 页面内容 --></view></template><script>  import { mapActions } from 'vuex'  export default {    created() {      // 在页面创建时，获取用户信息并保存到Vuex中      this.getUserInfo()    },    methods: {      ...mapActions(['setUserInfo']),      getUserInfo() {        // 获取用户信息的逻辑        // 例如，可以从后端API获取用户信息，并将其传递给setUserInfo方法        const userInfo = {          username: 'John',          avatar: 'http://example.com/avatar.png',          mobile: '123456789'        }        this.setUserInfo(userInfo)      }    }  }</script>

<template><view><text class="title">个人中心</text><view class="content"><image :src="userInfo.avatar" class="avatar"></image><text>{{ userInfo.username }}</text><text>{{ userInfo.mobile }}</text></view></view></template><script>  import { mapState } from 'vuex'  export default {    computed: {      ...mapState(['userInfo'])    }  }</script><style>  /* 样式省略 */</style>