## Vuex基本使用
1.初始化数据、配置actions、配置mutations，操作文件store.js
// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
const actions = {
// 响应组件中加的动作
jia(context, value) {
// console.log("actions中的jia被调用了", context, value);
context.commit('JIA', value)
},
}
const mutations = {
// 执行加
JIA(store, value) {
// console.log("mutations中的JIA被调用了", store, value)
store.sum += value
},
}
// 初始化数据
const state = {
sum:0
}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
2.组件中读取vuex的数据：$store.state.sum
3.组件中修改vuex中的数据：$store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法名',数据)
备注：若没有网络请求或其它业务逻辑，组件中也可以超越actions，即不写dispatch，直接编写commit
## getters的使用
1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
2.在store.js中追加getters配置
......
// 准备getters——用于将state中的数据进行加工
const getters = {
bigSum(state) {
return state.sum * 10
}
}
// 创建幷暴露store
export default new Vuex.Store({
......
getters
})
3.组件中读取数据：$store.getters.bugSum
## 四个map方法的使用
1.mapState方法：用于帮助我们映射state中的数据为计算属性
computed: {
// 借助mapState生成计算属性，从state中读取数据(对象写法)
// ...mapState({ he: "sum", xuexiao: "school", xueke: "subject" }),
// 借助mapState生成计算属性，从state中读取数据(数组写法)
...mapState(["sum", "school", "subject"]),
},
2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed: {
// 借助mapGetters生成计算属性，从getters中读取数据(对象写法)
// ...mapGetters({ bigSum: "bigSum" }),
// 借助mapGetters生成计算属性，从getters中读取数据(数组写法)
...mapGetters(["bigSum"]),
},
3.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)函数
// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
...mapMutations({ increment: "JIA", decrement: "JIAN" }),
// 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
// ...mapMutations(["JIA", "JIAN"]),
4.mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
...mapActions(["jiaOdd", "jiaWait"]),
备注：mapActions与mapMutations使用时，若要传递参数需要，在模板中绑定事件时传递好参数，否则参数是事件对象
## 模块化+命名空间
1.目的：让代码更好维护，让多种数据分类更加明确
2.修改store.js
const countAbout = {
namespaced：true, //开启命名空间
state:{x:1},
mutations:{},
actions:{},
getters:{
bigSum(state){
return state.sum * 10
}
}
}
const personAbout = {
namespaced：true, //开启命名空间
state:{ ... },
mutations:{ ... },
actions:{ ... },
}
const store = new Vuex.Store({
modules：{
countAbout,
personAbout
}
})
3.开启命名空间后，组件中读取state数据：
// 方式一：自己直接读取
this.$store.state.personAbout.personList;
// 方式二：借助mapState读取
...mapState("countAbout", ["sum", "school", "subject"]),
4.开启命名空间后。组件中读取getters数据：
// 方式一：自己直接读取
this.$store.getters["personAbout/firstPersonName"];
// 方式二：借助mapGetters读取
...mapGetters("countAbout", ["bigSum"]),
5.开启命名空间后，组件中调用dispatch
// 方式一：自己直接读取
this.$store.dispatch("personAbout/addPersonWang", personObj)
// 方式二：借助mapMutations读取
...mapMutations("countAbout", { increment: "JIA", decrement: "JIAN" }),
6.开启命名空间后，组件中调用commit
// 方式一：自己直接读取
this.$store.commit("personAbout/ADD_PERSON", personObj);
// 方式二：借助mapActions读取
...mapActions("countAbout", { incrementOdd: "jiaOdd",incrementWait: "jiaWait",}),
## 路由
理解路由：一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理
前端路由：key是路径，value是组件
1.基本使用
1.安装vue-router，命令：npm i vue-router
2.应用插件：Vue.ues(VueRouter)
3.编写router配置项
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About.vue'
import Home from '../components/Home.vue'
// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes: [
{
path: "/about",
component: About
},
{
path: "/home",
component: Home
}
]
})
// 暴露router
export default router
4.实现切换(active-class可配置高亮样式)
<router-link class="list-group-item"active-class="active" to="/about">About</router-link>
5.指定展示位置
<router-view></router-view>
## 几个注意点
1.路由组件通常放在pages文件夹，一般组件通常存放在components文件夹
2.通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的$route属性,里面存储着自己的路由信息
4.整个应用只有一个router，可以通过组件的$router属性获取到
## 嵌套路由
1.配置路由规则，使用children配置项：
routes: [
{
path: "/about",
component: About
},
{
path: "/home",
component: Home,
children: [ // 通过children配置子路由
{
path: "news", // 此处一定不要写：/news
component: News
},
{
path: "message", // 此处一定不要写：/message
component: Message
}
]
}
]
2.跳转(要写完整路径)
<router-link to="/home/news">News</router-link>
## 路由的query参数
1.传递参数
<!-- 跳转路由幷携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=666&title=你好`">跳转</router-link>
<!-- 跳转路由幷携带query参数，to的对象写法 -->
<router-link
:to="{
path: '/home/message/detail',
query: {
id: 666,
title: 你好,
},
}"
>跳转</router-link>
2.接收参数：
$route.query.id
$route.query.title
## 命名路由
1.作用：可以简化路由的跳转
2.如何使用
1.绘路由命名：
{
path: "/demo",
component: Demo,
children: [
{
path: "test",
component: Test,
children: [
{
name: "hello", // 绘路由命名
path: "welcome",
component: Hello
}
]
}
]
}
2.简化跳转
<!-- 简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome"></router-link>
<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}"></router-link>
<!-- 简化写法配合传递参数 -->
<router-link
:to="{
name: 'hello',
query: {
id: 666,
title: 你好,
},
}"
>跳转</router-link>
## 路由的params参数
1.配置路由，声明接收params参数
{
path: "/home",
component: Home,
children: [
{
path:"news",
component:News
},
{
component: Message,
children: [
{
name: "xiangqing",
path: "detail/:id/:title", // 使用占位符声明接params参数
component: Detail
}
]
}
]
}
2.传递参数
<!-- 跳转路由幷携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/666/你好`">跳转</router-link>
<!-- 跳转路由幷携带params参数，to的对象写法 -->
<router-link
:to="{
path: '/home/message/detail',
params: {
id: 666,
title: 你好,
},
}"
>跳转</router-link>
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！！！
3.接收参数：
$route.params.id
$route.params.title
## 路由的props配置
作用：让路由组件更方便的收到参数
{
name: "xiangqing",
path: "detail/:id/:title",
component: Detail,
// props的第一种写法，props值为对象,该对象中的所有key-value都会以props形式传给Detail组件
// props: { a: 900 }
// props的第二种写法，props值为若布尔值，布尔值为true，就会把该路由的所有params参数，以props形式给Detail组件
// props: true
// props的第三种写法，props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
// props($route) {
// return { id: $route.quid, title: $route.query.title }
/
// es6结构赋值写法
// props({ query: { title } }) {
// return { id, title }
// }
}
## <router-link>的replace属性
1.作用：控制路由跳转时操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3.如何开始replace模式：<router-link replace ......>News</router-link>
## 编程式路由导航
1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
2.具体编码：
// $router的两个API
this.$router.push({
name: "xiangqing",
query: {
id: xxx,
title: xxx,
},
});
this.$router.replace({
name: "xiangqing",
query: {
id: xxx,
title: xxx,
},
});
this.$router.forward() // 前进
this.$router.back() // 后退
this.$router.go() // 可前进也可后退
## 缓存路由组件
1.作用：让不展示的路由组件保持挂载，不被销毁
2.具体编码
<!-- 缓存多个路由组件 -->
<keep-alive :include="['News', 'Message']">
<router-link></router-link>
</keep-alive>
<!-- 缓存一个路由组件 -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
注意：include用来指定缓存的组件，值必须是组件名称，否则无效！！！
## 两个新的声明周期钩子
1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2.具体名字：
1.activated路由组件被激活时触发
2.deactivated路由组件失活时触发
## 路由守卫
1.作用：对路由进行权限控制
2.分类：全局守卫、独享守卫、组件内守卫
3.全局守卫：
// 全局前置路由守卫：初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
// console.log("前置路由守卫", to, from);
if (to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
if (localStorage.getItem("school") == "atguigu") { // 权限控制的具体规则
next() // 放行
} else {
alert("暂无权限查看")
}
} else {
next() // 放行
}
})
// 全局后置路由守卫：初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to, from) => {
// console.log("后置路由守卫", to, from);
if(to.meta.title) {
document.title = to.meta.title || "硅谷系统" // 修改网页的title
} else {
document.title = "vue_test"
}
})
4.独享守卫：
beforeEnter: (to, from, next) => {
// console.log("组件内的前置路由守卫", to, from)
if (to.meta.isAuth) { // 判断是否需要鉴权
if (localStorage.getItem("school") == "atguigu") {
next()
} else {
alert("学校名称不对，无权限")
}
} else {
next()
}
}
5.组件内守卫：
// 进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){
},
// 进入守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next){
},
## 路由器的两种工作模式
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
