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属性可以绑定一个函数来格式化单元格的内容

实现删除按钮：

后端删除需要实现一个接口，明天再写

参考文章：
vue【插件】uuid —— 生成 uuid

Vue使用uuid-npm快速生成uuid，适用于多种场景