Vuex-state-mutations

1.启动项目--访问ip地址-每天的ip地址不一样，是因为路由按访问的先后顺序分配id地址的

2.请求拦截器和响应拦截器

响应拦截器：所有的响应被我们拿到数据之前，对数据做一层处理，因为 我们如果直接拿服务端响应回来的数据，会被浏览器加一些其他无关的信息，我们可以通过拦截器处理一下，直接拿到服务端响应回了核心数据

3.封装好的组件里面的样式如果没达到预期的效果，可以自己直接写样式，通过组件名可以直接控制（因为控制组件的样式，如果时规范命名的组件，内部有同名的类名）

如；<van-button></van-button>

.van-button {

可以直接写样式了，无需再手动添加类名

}

规范：定义组件时，组件内容的根元素的类名 和 组件名 同名

4.封装好的组件如果经过路由解析，在vue调试工具里面，不能直接收到，我们可以给组件里面写一个 name:组件名

代码：export defaule {

name:home

}

vue调试工具： home 就可以收到home组件的内容

5.组件库-vant

6.封装请求api--场景发送请求直接根据文档开发-无逻辑-放在主逻辑代码里面，容易受干扰

好处：1.全部将请求集中到api文件夹中进行管理，将来修改管理方便（如果接口变了，可以直接在api文件夹里修改）

2.页面中，请求代码过多，会导致主逻辑不清晰

3.请求 的代码不封装，下次发同样的请求，又得再写一遍，不易维护复用（封装复用）

实际开发中，会将请求的部分专门封装成 api 模块

封装请求API：在src文件夹里面建一个api文件夹，然后在这个文件夹里进行分文别类

注意：请求需要有返回值

7.热门搜索：是后台经过大数据分析的数据，所以，我们需要发请求获取热门搜索，然后当点击的时候在发一个获取具体歌曲的请求

8.二次解构

方式一

const { code,result} =await reqgetHot()

{host}=result

方法二

const { code,rusult:{host}}=await reqgetHot()

9.解耦-封装的小组件，灵活度更高

封装大的会耦合度高一点

 

Vuex：是vue的状态管理工具，状态就是数据(vue内置的插件)

状态管理就是集中管理 vue 中 通用的一些数据

vuex的最大优点：多组件共享状态（共用一份数据），vuex的特点：响应式

使用场景:一般情况下，只有多个组件均需要共享的数据，才有必要存储在vuex中，对于某个组件中的私有数据，依旧存储在组件自身的data中，不是所有的地方都适合用于vuex,使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度

Vuex就像近视眼镜，你自然会知道什么时候需要它，只要是中大型项目，必会用到vuex，实际开发中，就正常开发，当发现父传子，子传父，非父子之间通信太复杂，就需要用到vuex

vuex解决了：多组件共享数据

使用跟vue-router前五部一样

1.下包：yarn add vuex

2.引入 ：import Vuex from "vuex"

import Vue from "vue"

3.注册：Vue.use(Vuex)

4.创建，导出

const store =new vuex.Store()

export default store

5.挂载 在main.js里 new Vue 里面挂载

 

Vuex的核心概念---

1.state状态 --存放数据

vuex如何提供数据

在 const store=new Vuex.Store({

state:{

这里面就是提供的数据，固定语法

count:100,

desc;"哈哈"

}，

mutations:{

//所有的mutations 的方法，第一个形参都是state

addOne(state){ //第一个形参都是 state ，

state.count++}

addN (state,value){

state.count+=value

}

}}})

状态即数据，state 就是数据 ，类似于 data ，都是响应式 ==》响应式，数据改变，视图会自动更新

区别： state是所有组件公用的数据，data 是组件私有的数据

组件怎么使用仓库里面的数据

1.先找仓库--

router，this.$router <==这是两种方式，第一种需要在组件里面导包

store,this.$store <== 两种方式找仓库

2.找仓库里面的数据，渲染到页面上 原生-任何环境都可以，但是麻烦

==><p>{{ $store.state.count}} </p>

==><p>{{ $store.state.desc}}</p>

简化： 利用计算属性，把仓库里的值读取出来，方便使用

​

{{ count }}--{{ desc}}

​

 

computed:{

count(){

retrun this.$store.state.count

},

desc(){

return this.$store.state.desc

}}

简化：vue提供的辅助函数 mapState

mapState 可以帮我们把vuex 中的 state数据， 映射给 组件 作为计算属性使用--只能拿一层，跟data中的数据使用差不多

首先：他是一个函数，可以调用传参

其次：他是从vuex中导出的函数

所以使用先按需导出

import {mapState} from "vuex"

// computed:mapState["count","desc","str"] <==这个时候mapState函数调用得到的是一个对象，整个computed被占完了，没办法添加自己的计算属性

computed :{...mapState["count"，“desc","str"]}< ==这里得到的是一个个计算属性，这样我们可以在computed中追加自己的计算属性了

就可以用了

<p> {{ count }}--{{ desc}} </p>

 

通过mapState配合展开运算符，拿到仓库中的数据可以直接去渲染，可以获取，但是不能直接进行修改--（牵扯到计算属性：计算属性默认情况

只能获取不能修改，必须写完整写法）

vue当中有一个概念：单项数据流，vuex也遵循单向数据流--不遵循规范，vue中如果开一个严格模式：strict：true 就会报错，不开的话也可以使用,开了会影响性能，开了他要检测数据是否更换

vux中的数据变化了，自动流动影响到所有的用到vuex数据的组件

组件中不能随意的修改 vuex 的数据 ==>交给vuex 自己去修改

想要修改vuex的数据，需要提交mutation

this.$store.commit("mutation的名字",只有一个参数) <==可以包裹成一个对象，或者数组

2.mutations 存放方法：存放的是修改数据的方法

 

this.$store.commit("addOne")

this.$store.commit("addN",value)

辅助函数：mapMutations