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组件引用:参考对应的文档即可