vuex用户信息的存取

可以通过在Vuex中定义state来存储用户信息，并在mutations中定义相应的方法来修改state中的值。在actions中可以定义获取用户信息的方法，并在该方法中调用接口获取用户信息数据后，通过commit方法将数据存储到state的用户信息(user)中。

具体实现如下：
1. 在Vuex的state中定义一个user字段来存储用户信息。可以通过在state中添加一个user属性，并设置初始值为空字符串或者从本地存储中获取用户信息(JSON.parse(getUser()))。
2. 在mutations中定义一个SET_USER方法，用于修改state中的user值。可以通过使用commit方法调用SET_USER方法来更新state中的user值。
3. 在actions中定义一个GetInfo方法，用于获取用户信息并调用commit方法将数据存在state的user字段中。可以在该方法中调用接口获取用户信息的数据，并通过commit方法调用SET_USER方法将数据存储到state的user字段中。

示例代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import { getUser } from "@/utils/auth.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: "",
    user: '' || JSON.parse(getUser()),
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_USER(state, user) {
      state.user = user
    },
  },
  actions: {
    // 请求接口获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo()
          .then(({ data }) => {
            commit("SET_USER", data);
            resolve(data);
          })
          .catch((error) => {
            reject(error);
          });
      });
    }
  },
  getters: {
    user: state => state.user
  }
})

这样，你就可以在页面中通过this.$store.state.user来获取vuex中存储的用户信息数据了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vuex用户信息的存取](https://blog.csdn.net/PaPablame/article/details/122727121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]