vue学（vuex,vuerouter，项目上线）

2022-12-27：

vuex：

1.vuex主要是对数据进行管理的插件，

2.vuex写法：a.通过在store文件夹中创建的index.js来实现（导入vue，导入vuex，使用vuex——Vue.use(Vuex),new一个Vuex.store)

b.创建好的store在main.js中进行引入，

c.引入完后在Vue实例中创建对应的对象。

3.vuex使用:

a.在index.js中的state对象中配置数据对象，如state:{ sum:0}

b.在methds中写this.$store.dispatch('actions中对应的键值',value)，

c.在index.js中的actions对象中写对应的键值对，值为函数，并在函数中进行commit（'mutations中对应的函数体',value）

d.在index.js中的mutations对象中写对应的函数

4.vuex中的getters属性：

getters主要是对state里面的数据通过函数进行加工并return返回值，获取其中的是数据this.$store.getters.函数名

5.vuex中的mapState，mapGetters:

a.作用：mapState和mapGetters分别用于页面中计算state和getters里面的值（使用前应先导入 import {mapState,mapGetters} from 'vuex'），

b.写法：...mapState{['state里的key','state里的key','state里的key']}，...mapGetters{['getters里的函数名','getters里的函数名']}

c.标签体里面写法：{{state里面的key}}，{{getters里的函数名}}

6.vuex中的mapActions，mapMutations:

a.作用：简化this.$store.dispatch()和this.$store.commit()的写法，

b.写法:在methods里面...mapActions({'调用actions的函数名':'action里面的函数名',})，...mapMutations({'调用mutations的函数名':'mutations里面的函数名',}),

c.在标签体里面写法：<button @click="调用actions的函数名（参数）">加值</button>

组件化使用vuex：

1.创建对应的模块js文件和index.js文件:

a.在模块化js文件中添加对应的actions，mutations，state，getters对象，并配置namespaced:true，使其模块对象默认暴露,

b.在index文件中导入各个模块，

c.组件文件中进行模块化使用，简化方式：...mapActions('模块化对象名',['action里面的函数名','action里面的函数名'])，

其他类似（使用前要导入：import {mapGetters,mapState,mapActions,mapMutations} from 'vuex'）

普通方式：this.$store.commit('phoneOptions/ADDPHONE',phone)，this.$store.dispatch('phoneOptions/getMood')

...mapState('phoneOptions',['phoneList','mood']),this.$store.getters['phoneOptions/getFirstPhone']

2.对应简单代码：

a.index.js

import Vue from 'vue'

import Vuex from 'vuex'

import countOptions from './countOptions'

import phoneOptions from './phoneOptions'

//使用Vuex

Vue.use(Vuex)

//创建并暴露store

export default new Vuex.Store({

modules:{

countOptions,

phoneOptions

}

})

b.模块：

export default{

namespaced:true,

actions:{},

mutations:{},

state:{},

getters:{},

}

2022-12-31：

vue中的路由vue-router：

1.vue-router创建：

a.创建router对象，在src文件夹下创建router文件夹，在其文件夹下创建index.js，在js中引入vue-router，并创建对应的对象，

如：export defult new VueRouter({routers[{path:'/data',component:Data},...]})

b.引入router，在main.js中通过import引入vue-router和router，并通过Vue.use(VueRouter)使用vue-router，在vue看对象中添加router属性

2.vue-router的使用：

a.在使用vue-router组件中使用router-link标签，此标签和<a>标签类似，其中to属性类似于<a>标签中的href属性，但to中需要些在router中注册的组件path

b.定位组件呈现的位置,使用<router-view>标签

注：切换route时，会销毁不显示的组件，挂载需要显示的组件，每个组件身上都有不同的route属性和相同的router属性

路由的嵌套：

1.在对应的父路由里面写children属性并配置对应的path和component，path前面不再加斜杠，使时注意to应该写出成带父路径的路径值，

2.query传参，可以在to属性里面使用对象的写法把参数传递过去，如：:to="{path:'',query{key:value,...}}"

命名路由：

可以通过对路由对象配置name属性进行使用，使用name后可以省略在to属性中的path这个属性，使用name即可

路由params参数：

1.写法:to="/xxx/xxxx/data/data"(data是传递的参数)，

2.在route对象中写path属性，path:'/xxx/xxx/:id/:name'，后两个参数使用占位符

注：query参数也可以使用对象的写法，但不能使用path属性，必须使用name进行限定，query也可以使用字符串，但比较繁琐不够简洁，

简化参数获取：

1.query传递的参数：

a.route对象中添加props（{query：{key，key}}）{key，key}函数

b.组件中写props:['key','key']

2.params参数传递：

a.route对象中添加props:true,

b.组件中写props:['key','key']

replace属性：

在<router-link>标签中使用replace属性后他的上一条返回的路径记录会被取代，因此无法返回到之前的网站路径

编程式路由：

可以使用组件身上的$router进行路由跳转，

a.写法：this.$router.push({name:'',params:{}}),this.$router.replace({name:'',params:{}})

b.前进、后退的api：this.$router.back(),前进api：this.$router.forward()，前进几步或后退几步：this.$router.go(n)注：n为整数，正数前进，负数后退

取消销毁：

在其展示的组件中使用<keep-alive>标签包裹<router-view>进行取消销毁，keep-alive的 include="组件名"属性可以规定那些组件可以不被销毁，如果不写则表示都不被销毁

如果是多个组件需要缓存直接写成数组,:include="['组件名','组件名']"

没在图上显示的三个生命周期钩子：

1.activated，deactivated,nextTick三个生命周期钩子，

2.使用：activated，deactivated是一对在路由里面特有的生命周期钩子，ac代表激活状态deac代表失活

注：activated，deactivated两个生命周期钩子只有被keep-alive标签进行include的组件才可使用，其他场景会没有效果

3.nextTick生命周期钩子主要是dom元素修改完成后，模板重新解析加载完成后调用的生命周期函数

路由守卫：

1.前置路由守卫：

a.beforeEach((to,from,next)=>{})，to为要去的路径，from是来的路径，next()表示放行

b.可以同过if来判断to.name==目的路由的名字，进行放行或拦截操作

c.简化判断：可以直接在需要进行判断的route对象中配置meta属性，meta:{isAuth:true}通过读取isAuth的值来进行判断

2.后置路由守卫：

a.afterEach((to,from)=>{})

b.可以通过后置路由守卫来更改网页的title标签

3.独享路由守卫：

a.beforeEnter((to,from,next)=>{}),需要写在对应的route里面

b.使用类似于beforeEach

4.组件内路由守卫：

a.进入路由守卫：beforeRouteEnter((to，from,next)=>{}),使用类似于前置守卫，当组件通过路由进入时调用，

b.离开守卫：afterRouteLeave（(to,from,next)=>{}），当组件通过路由离开时调用，

项目上线：

a.可以把mode改成history类型的，用来优化路径，展示时路径上不会有/#/（hash值）出现，

b.当改成history类型后放到项目中，网页一刷新会出现404错误，可以引入connect-history-api-fallback进行解决

ui组件引用：参考对应的文档即可