Vue学习笔记二

1.index.html中引入外部资源

1.1使用script标签

在index.html模板文件中，引入外部资源，首先遇到的问题就是外部资源的路径问题。在router为hash模式下，使用相对目录引入外部js文件没有问题，但是如果是history模式，那么路由就有可能嵌套好几层，再次使用相对目录的方式进行引入，就会出现问题。

比如上面的路径，要使用一个点，引入项目根目录下的lib文件夹下的RSA/RSA.js，就会出现问题。

1

<script type="text/javascript" src="./lib/RSA/RSA.js"></script>

使用一个点，其实引入的就是list/lib/RSA/RSA.js，但是这个路径下是没有这个文件的。使用两个点也不合适，但是直接使用一个斜杠，到网站的根目录又不行，如果项目不是部署在服务器的根目录而是一个虚拟目录的化，引入服务器根路径的资源就会出错。

解决方式就是在.env.development和.env.production等环境变量的配置文件中，添加变量：VUE_APP_BASE_URL=”http://localhost:8080/",然后在index.html中使用<%= VUE_APP_BASE_URL %>的方式进行引入。必须要定位为VUE_APP_开头，否则可能不生效。

1

<script type="text/javascript" src="<%= VUE_APP_BASE_URL %>/lib/RSA/RSA.js"></script>

根据参考文章3中的描述，BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

1.2使用import

可以直接在一个vue文件中使用import进行外部文件的导入，vue就会将该文件进行打包，如果要忽略打包，就要使用上面的script标签的方式进行引入。

1
2
3

// 加载Shape文件
import "../../../public/lib/mxGraph/Graph";
import "../../../public/lib/mxGraph/Shapes";

必要时在外部文件代码顶部添加一行注释,避免进行eslint检查

1

/* eslint-disable */ 

2.route的history本地配置

如果使用线上模式，就要配置route的mode为history，这个配合后台的nginx，没有什么问题，但是本地开发的时候，如果也配置为history，那么在子路由中，刷新页面就会出现：chunk-vendors.js:1 Uncaught SyntaxError: Unexpected token ‘<’ 错误，找不到要加载的js文件

解决方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const path=require("path")

module.exports={
    publicPath: process.env.NODE_ENV === 'production'?'/phemswebpc/':"/",
    devServer: {
        historyApiFallback: true
    },
    configureWebpack:{
        resolve:{
            alias:{
                "@":path.join(__dirname,"./src"),
                "@api":path.join(__dirname,"./src/api"),
                "@pages":path.join(__dirname,"./src/pages"),
                "@store":path.join(__dirname,"./src/store"),
                "@router":path.join(__dirname,"./src/router"),
                "@components":path.join(__dirname,"./src/components"),
                "@utils":path.join(__dirname,"./src/utils"),
                "@assets":path.join(__dirname,"./src/assets"),
                "@common":path.join(__dirname,"./src/common"),
                "@lib":path.join(__dirname,"./src/lib")
            }
        }
    }

}

有两个要注意的地方：
(1) devServer.historyApiFallback=true

(2) publicPath,注意最后的是”/“,而不是”./“,

3.vuex存储用户信息

如何使用vuex存储用户信息，以及如何解决刷新的问题。

主要就是获取token，然后使用sessionStore进行存储。根据参考文章1中的内容，其实包括整个认证的逻辑，基本上都讲的很明白了。

4.mouted方法中无法使用computed中的属性

如下的代码显示，在mounted中打印this.configList，却发现了是一个空。

1
2
3
4
5
6
7
8

mounted() {
    console.log(this.configList);
},
computed:{
    configList(){
        return this.$store.getters.configList;
    }
},

经过多次尝试，可以使用nextTick,获取到更新后的值

1
2
3
4
5

mounted() {
    this.$nextTick(()=>{
        console.log(this.configList);
    })
},

5.props传递对象

props在官方说法，就是单向数据流，也就是父组件修改传入的值，子组件可以同步更新，但是不能修改，修改后会报错。但是这里也是有限制的，就是子组件不能修改props的值，仅限于props是基本数据类型，如果props传入的是一个对象，你虽然不能将这个对象改变，但是可以改变这个对象的某个属性的值。官网上有这么一句话：

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

也就是说，你不能改变对象的指针地址，但是可以改变指针指向的内容。

如果非要严格的区分单向数据流，可以使用浅拷贝Object.assign({},obj)或者深度拷贝JSON.parse(JSON.stringify(obj)),将传入的对象进行复制，然后在复制的对象上进行处理，就不会出现子组件修改父组件的数据了。

6.动态组件

动态组件，我也经常称之为异步组件，但是看官网的说明，异步组件和动态组件其实是两个概念。其实就是在用到的时候再进行加载的组件，就类似于我们从后台请求了数据，然后数据要渲染到一个组件上，但是这个组件有没有加载或者是需要重新创建。传统的方式，其实就是获取数据后，然后手动构造html，然后插入到DOM中，这样做起来还是挺麻烦的。

动态加载的组件，还有一个问题就是如何进行传递参数的问题。

7.vuex的模块

(1) 调用模块的mutations

1

this.$store.commit("模块名/方法",temp);

(2) 调用模块的actions

1

this.$store.dispatch("模块名/方法",temp);

8.provide/inject

使用provide提供的数据失去了响应式了，如果需要的话，可以提供相应数据，或者以函数的形式进行提供。
父组件

1
2
3
4
5
6
7
8
9
10
11
12

const apiMixin = {
    data() {
        return {
            dronelist: [], // 无人机列表
        }
    },
    provide() {
        return {
            getDronelist: () => this.dronelist, // 将整个this 传递给子孙组件
        }
    }
}

子组件

1
2
3
4
5
6

computed: {
    // 无人机列表
    dronelist() {
        return this.getDronelist()
    }
}

9.动态挂载组件

我有一个需求就是如何将一个组件动态的挂载到组件上，将infowindow挂载到地图上去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
 * 人家的写法
 */
let popupComponent = Vue.extend(CountryRankPopup)
let popContent = new popupComponent({
    propsData: {
        map: that.map,
        properties: { ...item, color: color }
    }
})
window.glPopup.remove()
window.glPopup = new mapboxgl.Popup({ className: 'blue-popup-new', closeOnClick: true, closeButton: false })
    .setOffset(10)
    .setLngLat(coordinates)
    .setDOMContent(popContent.$mount().$el)
    .setMaxWidth('none')
    .addTo(window.glMap)

/**
 * 简单的写饭
 */
let popupComponent = Vue.extend(Infowindow)
let popContent = new popupComponent({})
popContent.$mount()