组件有新增修改两种状态该怎么使用

两种状态的使用

组件即可以展示数据 也可以把数据删除了新增，如果是新增的话用的是新增文件的后缀获取类型的图片，如果是展示的话根据后台传过来的图片类型展示

如果说后台有数据的话 根据后台传过来的类型判断：

computed: {
  fileImg(){
    if(this.type !=null){
      return this.$store.getters.getFileImgByType(this.type)
    }
  }
},
//其中type就是后台传过来的值，根据这个值来寻找图片
//这是vuex中的数据
fileType: [{
      value: 0,
      types: ['jpg', 'jpeg', 'png', 'gif'],
      img: require('@/assets/file/JPG.png')
    }],  
    //这是方法
getFileImgByType: (state) => (type) => {
    let value = '';
    value = state.fileType.find(item => item.value == type).img
    return value;
  }

如果是新增的话就是根据上传附件的后缀名例如.doc .txt 来判断用哪张图片
一直想不到用那种方法来判断，后来看了别人做的 根据后缀名---判断type也就是上面的value是多少---根据获取到的数据再用计算属性获取图片

//如果是新增
//1. 现在data中设置数据  
data(){
  return {
    fileType:[]
  }
}
//2.把vuex中的数据赋值给上面的数据  
mounted(){
  this.fileType=this.$store.state.fileType
}
//3. 设置一个方法,通过后缀名来判断类型 
 getTypeByLastName(type){
  let value = this.fileType.find(item=>{
    return item.types.indexOf(type)!=-1
  });  
  this.type = value.value;
},
//4. 在上传附件的时候调用方法传入后缀名获取类型
 self.getTypeByLastName(/[^.]+$/.exec(file.name.toLowerCase())[0])