投资公司logo,提高seo关键词排名,中国各大网站名称,网站怎么做子分类文章目录 问题vuex状态管理父子组件数据展示路由跳转用户信息的修改 改进 本篇主要总结出现的问题和一些解决方法 问题
vuex状态管理
在登录功能中#xff0c;我使用了local storage进行了用户信息的持久化处理#xff0c;为此#xff0c;我在vuex里定义了一个方法#x… 文章目录 问题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/storageexport 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 classcommend-listtemplate v-fornestedArray in CommendListCommendItems v-forcomment in nestedArray :itemcomment :keycomment.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.touImgres.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,};改进
1.分页数据的展示和管理 2.对于弹窗的应用例如弹窗修改某些数据 3.展示多张图片 …
