10天完成民猫电商毕设——商品展示实现（6th day）

1.知识充电

1.Promise控制异步操作顺序执行

new Promise((resolve) => {
          
   
  console.log("执行操作1");
  resolve();
}).then(() => {
          
   
   console.log("执行操作1");
});

2.async/await控制异步操作顺序执行

async 修饰一个函数，表示该函数是一个会返回Promise对象的的异步函数。（执行异步函数时，不会阻塞异步函数外层的代码执行） await修饰一个Promise对象，在async 修饰的函数内部使用，表示要等到该Promise对象resolve或reject后才执行后面的代码

async fun(){
          
   
	await new Promise((resolve)=>{
          
   
		op2();
		resolve();
	})
	op2();
}

如果失效，可以手动设置延时来进行顺序控制

setTimeout(() => {
          
   被延时的操作}, 300);

3.前端的字符串处理函数

截取：substr(start,length) 拼接：str1+str2 切割：split(“-”) 把字符串按照-作为分割符切割，返回切割后各部分组成的数组

4.前端的数组处理函数

push：向数组的末尾添加一个或多个元素，并返回新的长度 pop：删除并返回数组的最后一个元素 shift：删除并返回数组的第一个元素 unshift：向数组的开头添加一个或更多元素，并返回新的长度 splice：

1、删除，当参数形式为splice(index,1)时表示删除下标为index的内容 2、更新，当参数形式为splice(index,1,item)时表示用新的值item更新替换掉下标为index的值 3、增加，当参数形式为splice(index,0,item)时表示在下标为index的位置增加一项值为item

sort：对数组的元素进行排序 reverse： 反转数组中元素的顺序

2.整理一下vuex的使用过程

搭建环境

安装 cnpm install vuex@3 --save 创建 store/index.js

import Vue from vue;
import Vuex from vuex;
Vue.use(Vuex);
//对外暴露store类的一个实例
export default new Vuex.Store({
          
   
    state: {
          
   
		userInfo: {
          
   }
	},
    mutations: {
          
   
     	userInfo(state, userInfo) {
          
   
        	state.userInfo = userInfo
     	}
    },
    actions: {
          
   },
    getters: {
          
   }
})

项目main.js导入

import store from ./store;
new Vue({
          
   
  store,
  render: h => h(App)
}).$mount(#app)

组件中使用vuex

A组件保存得到的数据

import {
          
    mapMutations } from "vuex";

methods: {
          
   
	...mapMutations(["userInfo"]) //把vuex中的userInfo方法映射挂载到组件实例上
}

this.userInfo(userInfo);//把info保存到vuex中

B组件获取vuex中的值，并使用

computed: {
          
   
    userInfo() {
          
   
      return this.$store.state.userInfo;
    },
  },

<div>{
         
  { userInfo }}</div>

3.用户发布列表展示实现

通过vuex,我们获取到了Home在mounted时期从后台获得的数据 好！现在就是把它们以好看的形式渲染出来就行了 选择表格组件渲染如下： 表格的发布时间项和状态项不太方便用户阅读和理解，我们应当先对其处理一下再进行渲染 阅读官方文档，发现el-table-column有一个formatter属性可以绑定一个函数来格式化单元格的内容 实现删除按钮： 后端删除需要实现一个接口，明天再写