VUE第七天学习

内容：歌曲播放页面、搜索页面、stylus、vuex

一、歌曲播放页

1.获取歌曲播放地址

https://music.163.com/song/media/outer/url?id=歌曲编号.mp3

2.获取歌曲信息

接口地址：

http://localhost:3000/song/detail?ids=歌曲编号

二、搜索页

接口地址：

1.热搜词

http://localhost:3000/search/hot

2.搜索

http://localhost:3000/search

必选参数：keywords 要搜索的关键

可选参数：limit 返回结果的条数

三、项目打包

npm run build

四、stylus

富于表现力、动态的、健壮的 CSS

冒号可有可无
分号可有可无
逗号可有可无
括号可有可无
变量
插值（Interpolation）
混合（Mixin）
数学计算
强制类型转换
动态引入
条件表达式
迭代
嵌套选择器
父级引用
Variable function calls
词法作用域
内置函数（超过 60 个）
语法内函数（In-language functions）
压缩可选
图像内联可选
Stylus 可执行程序
健壮的错误报告
单行和多行注释
CSS 字面量
字符转义
TextMate 捆绑

1.安装

npm install stylus stylus-loader --save

2.使用

(1)基本使用

.mask
        width 100vw
        height 100vh
        background-color rgba(0,0,0,0.5)
        .content
            width 400px
            height 300px
            background-color #fff
            transform translateY(50%)
            border-radius 20px
            .form-container
                margin-top 50px
                text-align center    

注意：要依靠缩进来控制元素层级

(2)定义外部styl文件来预设样式

我们可以项目中用到的颜色、尺寸、表格、表单等样式预先设置好，在组件中引入设置好的文件即可使用stylus，达到样式预处理的作用。

五、vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

仓库

​ state、mutations、getters、actions、module

1.安装

​ npm install vuex --save

2.引用

import Vuex from 'vuex'

Vue.use(Vuex)

const store = Vuex.Store({

})

3.核心概念

(1)state

​ 类似单页面data

​ Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

(2)mutations

​ 类似单页面methods

​ 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

mutation 同步操作

(3)actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

(4)getters

类似computed

有时候我们需要从 store 中的 state 中派生出一些状态

示例代码

/src/main.js来定义仓库

import Vuex from 'vuex'
Vue.use(Vuex)
//创建仓库
const store = new Vuex.Store({
  state:{
    msg:'hello vuex',
    count:5
  },
  mutations:{
    setMsg(state,txt){
      state.msg = txt
    },
    setCount(state){
      state.count+=2
    }
  },
  actions:{
    setCount(context){
      console.log('actions被执行了')
      context.commit('setCount')
    }
  },
  getters:{
    newCount:state=>{
      return state.count*3
    }
  }
});

在页面组件中使用/改变仓库中的数据：

<template>
    <div>
        <h3>vuex的使用</h3>
        <h4>从仓库中获取数据{{ $store.state.msg }}，数量:{{ $store.state.count }}</h4>
        <button @click="changeMsg">点我改变数据--mutation</button>
        <button @click="$store.dispatch('setCount')">点我改变数据--action</button>
        <p>通过getters获取的数据{{ num }}</p>
    </div>
</template>
<script>
export default {
    methods:{
        changeMsg(){
            this.$store.commit('setMsg','你好')
            this.$store.commit('setCount')
        }
    },
    computed:{
        num(){
            return this.$store.getters.newCount
        }
    }
}
</script>