我的（手机号+密码）登录成功后返回数据 存储在vuex ，通过本地存储 做数据持久化

思路：vuex+本地存储做数据持久化

1. 在用手机号和密码登录页面，点击登录按钮后 通过路由跳转到 my这个页面，
this.$router.push("/my");

2. 将登录成功后返回的数据：保存到 vuex的state中

2.1 先导入vuex中的方法
 import {mapMutations} from "vuex";
 
2.2 在需要用到vuex的Mutations方法的组件的methods中引入 方法
 ...mapMutations(["getUser"]),
 
2.3  将登录成功后返回的数据：保存到 vuex的state中
  this.USER_DATA(res.data);
 
3. vuex ：
  3.1 state 定义一个空对象用于保存用户信息
  3.2 mutations 定义一个函数，用来将传递过来的用户信息 更新到 state中
     [USER_DATA](state, data) {
            state.loginStatus = true
            state.token = data.token
            state.user = data
            // 将登录数据保存到本地，做到数据持久化
            localStorage.setItem('userData', JSON.stringify(data))
        },
   3.3 本地数据获取：
    // 获取本地存储数据，并挂载到 APP.vue 的created中
    [USER_INIT](state) {
        let userInfo = JSON.parse(localStorage.getItem('userData'))
        if (userInfo) {
            state.loginStatus = true
            state.token = userInfo.token
            state.user = userInfo
        }
    }
    
    3.4 将本地信息初始化调用写到  APP.vue 的created中
     <script>
    export default {
      created() {
        this.$store.commit("USER_INIT");
      },
    };
    </script>
  
4. my路径中的 header 页面的：使用vuex的user数据

4.1 先导入state
import { mapState } from "vuex";

4.2 在computed中结构出来user
  computed: {
...mapState({
  user: (state) => state.users.user,  // 用户登录信息
  loginStatus: (state) => state.users.loginStatus,  // 用户的登录状态
}),
  },
 
4.3 根据条件判断 展示用户名和 头像
   <div v-if="loginStatus" class="loginUser">
  <!-- 判断用户登录后默认头像绑定： -->
   <img :src="user.imgUrl == 1 ? '../images/searchShop.png' :user.imgUrl" alt />
    <span>{{user.name || user.tel}}</span>
   </div>
  <div v-else @click="goLogin" class="logins">
    <span>登录/注册</span>
  </div>

vuex代码：在store文件夹上

1. 写一个 mutations-types.js 存放 mutations的函数名

   2. 创建一个users.js文件：单独写 state getters mutations actions 这些内容 为了方便管理登录的用户信息

      import { USER_DATA, USER_INIT } from "./mutations-types"

      export default { state: { loginStatus: false, // 用户登录状态 token: null, // token user: {} // 用户信息 }, getters: {}, mutations: { // 第二个参数： 登录成功后返回的数据 存放到 state的user中 [USER_DATA](state, data) { state.loginStatus = true state.token = data.token state.user = data // 将登录数据保存到本地，做到数据持久化 localStorage.setItem('userData', JSON.stringify(data)) },

           // 获取本地存储数据，并挂载到 APP.vue中
           [USER_INIT](state) {
               let userInfo = JSON.parse(localStorage.getItem('userData'))
               if (userInfo) {
                   state.loginStatus = true
                   state.token = userInfo.token
                   state.user = userInfo
               }
           },
           
            // 退出登录
           logout(state) {
               localStorage.removeItem('userData')
               state.loginStatus = false
               state.token = null
               state.user = {}
           }
      
      
       },
       actions: {}
      

      }

2. 在store的index.js文件上引 users.js文件 并挂载到modules上