vue酷狗音乐实战开发— 2.vuex的使用

秒速五厘米 2022-01-21 02:19 261阅读 0赞

总结一下上节的路由

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

接口测试

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

设置代理

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

proxyTable: {
        "/proxy/": { // 以 /proxy/为开头的适合这个规则
            target: "http://m.kugou.com", // 目标地址
                "secure": false, // false为http访问，true为https访问
                    "changeOrigin": true, // 跨域访问设置
                        "pathRewrite": { // 路径改写规则
                "^/proxy": "" // 以 /proxy/为开头改写为 ''
                "^/api": "/list" // 以 /api/为开头改写为 '/list'
            },
            "headers": { // 设置请求头，伪装成手机端访问
                "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N)
                AppleWebKit / 537.36(KHTML, like Gecko) Chrome / 65.0.3325.181 Mobile
                Safari / 537.36"
            }
        }
        路径改写规则:
        访问地址：http://localhost:8080/proxy/plist/class 访问第三方接口为：
        http://m.kugou.com/plist/class
        访问地址：http://localhost:8080/api/plist/class 访问第三方接口为：
        http://m.kugou.com/list/plist/class

安装vuex

npm i vuex --save

在src目录下新建 store/index.js

import Vue from 'Vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    let store = new Vuex.Store({
        state: {
            isLoading: true
        },
        mutations: {
            updateIsLoading(state, loading) {
                state.isLoading = loading;
            }
        }
    })
    
    export default store;

store

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220121/e0bc5079239e4a91ab8a0f0fc21717e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220121/5ef5ba49114842e79d6fc32a1f61cf97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220121/4ad7a77301114c73a3f972ae6084d210.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220121/5dc6c652be474209b95699db766ad35a.png