vue2自创项目——饭搭子项目总结

本篇主要总结出现的问题和一些解决方法

问题

vuex状态管理

在登录功能中，我使用了local storage进行了用户信息的持久化处理，为此，我在vuex里定义了一个方法，
详细代码如下：
index.js:

import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user";


Vue.use(Vuex)

export default new Vuex.Store({
    getters: {
      token (state) {
          return state.user.userInfo.token
        }
      },
    modules:{
        user,
    }
})

user.js

import { getInfo,setInfo,removeInfo } from "@/utils/storage"

export default {
    namespaced: true,
    state () {
      return {
        userInfo: getInfo()
      }
    },
    mutations: {
        setUserInfo (state, obj) {
            state.userInfo = obj
            setInfo(obj)
          },
          resetUserInfo(state) {
            state.userInfo = {
              userId: ''
            }
            removeInfo()
          }
    },
    actions: {
      updateUserInfo({ commit }, obj) {
        commit('setUserInfo', obj);
      },
      logout({ commit }) {
        commit('resetUserInfo');
      }
    }
  }

storage.js

const INFO_KEY  = 'eat_info'
// 获取个人信息
export const getInfo = () => {
    const result = localStorage.getItem(INFO_KEY)
    return result ? JSON.parse(result) : {
      userId: '',
    }
  }
  
  // 设置个人信息
  export const setInfo = (info) => {
    localStorage.setItem(INFO_KEY, JSON.stringify(info))
  }
  
  // 移除个人信息
  export const removeInfo = () => {
    localStorage.removeItem(INFO_KEY)
  }

  // 获取搜索历史
export const getHistoryList = () => {
  const result = localStorage.getItem(HISTORY_KEY)
  return result ? JSON.parse(result) : []
}

// 设置搜索历史
export const setHistoryList = (arr) => {
  localStorage.setItem(HISTORY_KEY, JSON.stringify(arr))
}

在页面中使用：

 this.$store.commit('user/setUserInfo',yonghu)

问题在于，在整个项目中vuex只用于了用户信息的存储，在最近看完vue3某个项目后，（虽然它用的是pinia进行状态管理），发现vuex的作用有很多，其实还可以把一些通用的方法在vuex中进行封装，在组件中进行调用，提高效率。

父子组件数据展示

提高父子组件，出现的首个问题就是子组件复用问题，因为我的项目有很多页面获取到的数据都是相同的，例如在不同模式下展示帖子数据，评论的数据，这些只有样式有一些小的差别，但是我没有进行组件复用，现在想起来，是可以进行组件复用的，不用的数据就丢在那里，不用管就可以。由于没有复用，导致我的子组件有很多，冗杂繁琐

第二个问题就是父组件得到数据，向子组件展示中，由于我用数组包起来向子组件传递，而且是两层数组,传到子组件时，有的展不开，导致数据错乱，理想状态下是单条数据向子组件传递，这样好展示，在网上搜索后，用这种方法得到了解决。
两层for循环遍历

<div class="commend-list">
    <template v-for="nestedArray in CommendList">
      <CommendItems v-for="comment in nestedArray" :item="comment" :key="comment.commentId"></CommendItems>
    </template>
  </div>

在子组件中：

props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },

路由跳转

在用push方法进行跳转并携带参数，在跳转后的页面，一刷新页面跳转来的参数就没有了，如何解决这个问题？如下代码：

 this.$router.push({
        name: 'pinglun',
        params: {
          param1: param1,
          param2: param2
        }
      });

在路由中定义path时加上

path: '/pinglun/:param1/:param2',

 //接收路由挑来的值
    this.receivedParam1 = this.$route.params.param1;
    this.receivedParam2 = this.$route.params.param2;

用户信息的修改

首先是头像的展示和修改，这个功能卡了很长时间

数据定义：

  data() {
    return {
      form: {
        userId:'',
        userNickname: '',
        userGender: '',
        userMajor: '',
        userLocation: '',
      },
      touImg:'',
      fileList: [], // 保存上传的文件
    };
  },

利用ui中的功能将图片上传

 afterRead(file) {
      console.log(file.file);
      changeTouxiang(this.userInfo.userId,file.file).then((res)=>{
        console.log(res);
      })
    }

在数据库中获取图片展示出来

   getMyDate(this.userInfo.userId)
        .then(res=>{
         this.touImg=res.data.userAvatar
         this.fileList.push({ url:  this.touImg,isImage: true  })
         console.log(this.touImg);
        })

对于信息修改，有些信息需要修改，有些不需要修改，但不管修不修改，都要传到数据库中进行更新

 // 更新用户信息
      const updatedUserInfo = {
        ...this.userInfo,
        userNickname: this.form.userNickname,
        userGender: this.form.userGender,
        userMajor: this.form.userMajor,
      };

改进

1.分页数据的展示和管理
2.对于弹窗的应用，例如：弹窗修改某些数据
3.展示多张图片
…