开发喵星球

1. 在 src\store\modules\user.js 文件中进行设置

1.1 在 state 中定义 nickName 变量

const user = {
  state: {
    ...
    niceName: '',  // 添加用户昵称字段
    ...
  },

在这里，我们在 state 中添加了一个新的属性 nickName，用来存储用户的昵称信息。

1.2 在 mutations 中添加设置用户昵称的方法 SET_NICKNAME。

mutations: {
  SET_NICKNAME: (state, nickName) => {
    state.nickName = nickName;
  },
  ...
}

这里我们定义了一个 SET_NICKNAME ，用于更新 nickName 的值。

1.3 设置用户昵称

actions: {
  GetInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo().then(res => {
        // 其他处理...
        commit('SET_NICKNAME', res.nickName) // 设置用户昵称
        // 其他处理...
      }).catch(error => {
        reject(error)
      })
    })
  },
  // 其他方法...
}

在这里用action方法获取用户信息，在 GetInfo 方法中成功获取信息后调用SET_NICKNAME 来设置用户昵称。

2、在组件中获取用户昵称

在需要获取用户昵称的组件中，可以直接从 Vuex 中获取用户昵称。

let userName = this.$store.state.user.nickName;

如果您希望在 .vue 文件中定义 nickName，可以在 data 中直接引用 Vuex 中的 nickName。

export default {
  ...
  data() {
    return {
      nickName: this.$store.state.user.nickName,
      ...
    }
  }
}

到这一步，已经成功将用户昵称设置到 Vuex 中，并且任何组件都可以直接获取用户的昵称。

3、测试

<template>
  <div>
    <h2>User Profile</h2>
    <p>User Nickname: {{ nickName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nickName: '' // 初始化用户昵称为空
    };
  },
  mounted() {
    // 在组件加载时从 Vuex 中获取用户昵称
    this.nickName = this.$store.state.user.nickName;
  }
};
</script>

这样，在页面上就可以显示用户的昵称了。