[前端]Vue与Uniapp实践笔记

Vue

目录

• 问题
  • • 1.Avoided redundant navigation to current location: "/setting".
    • 2.腾讯TcPlayer引入
    • 3.vue-cli3 热更新失效
• 速查
  • 利用axios自定义上传文件
  • Vuex与辅助函数
    • 1.基础
    • 2.注意
    • 3.辅助函数
  • Vue事件总线(event bus)

问题

1.Avoided redundant navigation to current location: "/setting".

解决方法：
在引入vue-router时候加入

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

2.腾讯TcPlayer引入

播放器地址：https://cloud.tencent.com/document/product/454/7503

1. uniapp

import {TcPlayer} from "../../common/TcPlayer-module-2.3.3.js";

2. vue
   在index.html文件中通过script标签引入，然后直接使用

3.vue-cli3 热更新失效

https://blog.csdn.net/xingmeiok/article/details/90512917
https://www.cnblogs.com/jackzer666/p/13345231.html

解决方法:

1. 配置vue.config.js中css分离再开发状态下为关闭

// 是否为生产环境
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  css: {
    // 是否开启css分离 在开发环境开启会导致热更新异常
    extract: isProduction,
    // 在浏览器审查时是否显示当前css文件路径 开发环境建议开启 不影响热更新
    sourceMap: true, 
  },
  
  // 生产环境是否生成sourceMap文件
  productionSourceMap: false,
  ...
}

1. 安装对应版本的webpack-dev-server
2. 开启本地服务，在package.json中配置
3. 在devServer中配置disableHostCheck: true

// package.json
"scripts": {
  "serve": "vue-cli-service serve && webpack-dev-server --open",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

// devserver配置
devServer: {
  disableHostCheck: true,//webpack4.0 开启热更新
}

速查

利用axios自定义上传文件

参考：https://www.jb51.net/article/170777.htm

<!--自定义上传dom节点-->
<input type="file" id="avatar-upload" style="display: none" @change="uploadFile">
<label class="upload-btn" for="avatar-upload">
  更换头像
</label>
<!--自定义上传dom节点-->

<script>
  uploadFile(e) {
    let inputDom = document.getElementById('avatar-upload');

    let files = e.target.files;

    if(files && files[0]) {
      const file = files[0];
      //3M
      if(file.size > 1024 * 1024 *3) {
        this.$message.error('文件过大');
        inputDom.value = '';
        return false;
      } else {
        let formData = new FormData();
        formData.append("avatarfile",files[0],files[0].name);
        ///下方的上传方法
        this.upload('/system/user/profile/avatar', formData)
          .then((res) => {
          this.$message.success('更换成功');
          inputDom.value = '';
        })
      }
    }
  }，  
  //====axios上传=====
    var service = axios.create({
      baseURL: Api_url,
      timeout: 500
    })

    upload(url, data={}) {
      return new Promise((resolve, reject) => {
        service({ url, data, method: 'post', headers: {
            "Content-Type": "multipart/form-data;boundary="+new Date().getTime()
              Authorization = `xxxxxxx`
        }})
          .then(res => {
            console.log("==upoad==", res)
            if(200 === res.data.code) {
              resolve(res)
            } else {
              reject(res)
            }
          })
          .catch(err => {
            // console.log("==upoad==", err)
            reject(err);
          })
      })
    }
  //==============
</script>

Vuex与辅助函数

vuex写法: https://www.cnblogs.com/alex-song/p/13260653.html
辅助函数：https://blog.csdn.net/wh710107079/article/details/88181015

1.基础

1. state
2. mutation
3. commit
4. action
5. dispatch
6. getter
   state存储数据，mutation是唯一可以修改state的方式， commit 用户提交某一个mutations操作，dispath用来触发某一个具体的action，具体的action再触发某一个mutation.mutations是同步的，action是异步的.getter利用state构建计算属性。

2.注意

vuex的数据放在内存中，刷新页面后会丢失，需要给某些数据设置默认值，一般放在cookie或者localStorage中。例：

  const store = new Vuex.Store({
    state:{
      token: Cookies.get('token')||'',
      userInfo: JSON.parse(localStorage.getItem("userInfo"))||{},
      noticeList: JSON.parse(localStorage.getItem("noticeList"))||[]
    }
  })

3.辅助函数

computed:{
  ...mapState({
    count:state=>state.count
  }),
  ...mapGetters({
    changeState:'changeState'
  })
},
methods: {
  ...mapMutations({
    muCountAdd:'muCountAdd'
  }),
  ...mapActions({
    acCountAdd:'acCountAdd'
  })
}
</script>

Vue事件总线(event bus)

https://www.cnblogs.com/wjw1014/p/13492342.html

//main.js
Vue.prototype.$EventBus = new Vue()

//a.vue
// 发送事件
this.$EventBus.$emit('closeLiveRoom', "params1", "params2");

//b.vue
//接收事件
mounted() {
  this.$EventBus.$on('closeLiveRoom', (params1, params2) => {
    console.log(params1, params2);
  });
}