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

文章目录

问题
- vuex状态管理
- 父子组件数据展示
- 路由跳转
- 用户信息的修改
改进

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

问题

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 = objsetInfo(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.userAvatarthis.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,};