今天完成的事情：
1.用vuex的成功把id传到另一个组件里，然后读取进行编辑，现在卡在图片的读取，因为之前用的是element的组件来上传图片，现在想读取的话，需要写一个给fileList数组里面添加url的数据，但是添加网页http://carrots.ks3-cn-beijing.ksyun.com/task/c22c95f7-db70-4fe1-a3cf-d1420cf31051.jpg这种格式的话，是可以读取出来的，让url：this.obj.img就失效了，怀疑是这个element组件内部封装加了其他判断，导致url只认识http://开头的（瞎猜的），准备换个方法把这个图片读取出来。
store.js:
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
//state里面只放置全局需要共用的属性
state: {
vueId:0,
vueData:{}
},
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，此时里面的必须是同步函数
mutations: {
changeId(state,payload){
state.vueId=payload;
}
},
//Action 提交的是 mutation，而不是直接变更状态。并且Action 可以包含任意异步操作。
actions: {
//context是state的父级，这里需要这么写,这个是随便写的，其实没有用到
edit(context){
axios({
method: 'post',
url: `/a/article/${context.state.vueId}`,
})
.then(res=>{
// context.state.vueData=res.data.data.articleList;
console.log(res);
})
.catch(err=>{
console.log(err);
})
}
},
//Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样
//getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
getters: {
}
});
pass.vue这个文件里面有编辑按键：
<template> <router-link to="/hom/edit">
<input type="button" value="编辑" @click="getId(list.id)"/>
</router-link>
methods: {
//vuex
getId(id){
this.$store.commit("changeId",id);
edit.vue:
<template>
<div id="edit">
<p>新增Article</p>
<div>
<span class="span">标题名称</span>
<input type="text" v-model="obj.title" />
<span class="span">类型</span>
<el-select v-model="obj.type" placeholder="请选择">
<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<span class="span">跳转链接</span>
<input type="text" v-model="obj.url" />
<span class="span">富文本</span>
<input type="text" v-model="obj.shuo" />
<div>
<span class="span">配图</span>
<el-upload
action="/api/a/u/img/{module}"
list-type="picture-card"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:file-list="fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
<div>
<input type="button" value="立即上线" @click="editData()" />
<input type="button" value="存为草稿" @click="editData()" />
<router-link to="/hom/pass">
<input type="button" value="取消" />
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: "edit",
props: {
editID: "number"
},
data() {
return {
imageUrl: "",
imgUrl: "",
obj: {},
type: [
{
value: "all",
label: "全部"
},
{
value: 0,
label: "首页banner"
},
{
value: 1,
label: "找职位banner"
},
{
value: 2,
label: "找精英banner"
},
{
value: 3,
label: "行业大图"
}
]
};
},
//获取单个列表
created() {
console.log(this.$store.state.vueId);
this.axios
.get(`/a/article/${this.$store.state.vueId}`)
.then(res => {
this.obj = res.data.data.article;
console.log(res);
console.log(this.obj.img);
})
.catch(err => {
console.log(err);
});
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.imgUrl = res.data.url;
},
handleRemove(file, fileList) {},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
editData() {
const r = confirm("确定修改？");
if (r) {
this.axios({
url: `/a/u/article/${this.$store.state.vueId}`,
method: "put",
params: {
title: this.obj.title,
status: this.obj.status,
img: this.obj.img,
content: "",
url: this.obj.url,
createAt: this.obj.createAt,
type: this.obj.type
}
})
.then(res => {
this.$router.push("/hom/pass");
// console.log(res);
})
.catch(err => {
console.log(err);
});
}
}
}
};
</script>
<style lang="scss" >
#edit {
.el-upload--picture-card {
width: 100%;
}
.el-upload-list__item {
width: 100%;
height: 100%;
}
.span {
padding: 5px 20px;
}
input {
margin: 10px;
}
}
</style>
明天计划：
把富文本加上，把图片读取出来。
返回列表
评论