Vue急速入门-6
纯净的Vue项目
# 安装依赖
cnpm install
# 做成纯净的vue项目
-第一步：在router 的index.js 中删除about的路由
-第二步：删除所有小组件和about页面组件
-第三步：App.vue 只留
<template>
<div id="app">
<router-view/>
</div>
</template>
补充:
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.119:8080/
终端下的这两个路由分别代表的是本机地址/网络地址
Vuex的使用
# Vuex是vue的插件，增强了vue的功能。
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
# Vuex的使用流程
-state：存数据的地址
-actions：服务员，中转站
-mutations：厨师，真正改state数据的地方
# Vuex使用步骤：
1 在state中定义变量
2 在组件中通过this.$store.dispatch('actions中定义的函数')，触发actions中得函数执行
3 在actions中得函数中，调用 context.commit('mutations中定义的函数')
4 在mutations中定义的函数实现真正的修改state中得数据
5 页面中只要使用$store.state.变量，变量变化，页面就变化 实现了组件间通信
6 注意：
-在组件中可以直接调用commit触发【mutations中定义的函数】
-在组件中可以直接修改state中定义变量
# Vuex使用示例：
1 安装，新建store/index.js
2 在index.js 中写
export default new Vuex.Store({
state: {
# 放数据
},
mutations: {
# 放方法，正常是让actions中来调用
# 组件也可以直接调用
},
actions: {
# 放方法，正常组件调用
}
})
3 在组件中
-显示state的变量
html中：
{{$store.state.变量名}}
js中：
this.$store.state.变量面
改state中的值
-推荐按正常步骤：
1. this.$store.dispatch('actions中的方法',参数)
2.actions中的方法调用context.commit('mutations',参数)
3.在mutations中直接修改state的值
-也可以跨过任何一步，直接使用commit或者直接修改state:
this.$store.commit()
this.$store.state.变量名
vuex的执行流程图
从左边的Vue Components（Vue组件）开始看。
Backend API：后端接口
Devtools：在浏览器可以装一个Vue调试插件。可以看到Vue组件。
VueX有三个状态Actions，Mutations，State。
在组件的数据通过调用dispatch放入Vuex状态管理器，进入actions状态，在actions状态调用commit，进入Mutations状态，在Mutations调用Mutate实现真正的修改数据。
比如组件向修改一个变量的数据，需要先通过actions的逻辑判断，判断当前组件是否允许修改数据。actions可以向后端发请求，判断当前用户是否有权限。
在一些情况下，Vue组件可以跨过Actions状态，直接通过Mutations修改数据。
Vuex的使用
由于我们创建项目的时候自动安装了Vuex，所以会有一个store文件，在此文件夹下有index.js查看其代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
在main.js注册
补充，在main.js这个vue对象中传入store:"xiaoming"属性
在根组件 created方法 打印this
总结：也就是说在main.js里的这个Vue对象里添加的属性，以后再任意组件中都可以通过$属性名的方式获取。
所以Vuex就是将自己的对象放入了$store供所有组件使用（this.$store）：
而这个对象，就是从store/index.js导出的那个对象：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
数据交互方式:
state：真正存数据的
mutations：修改state的地址 state.变量名，修改即可
actions：判断，跟后端交互，调用mutations的地方 context.commit
如何查看组件中State的变量:
我们可以在组件中显示state的变量
html中：
{{$store.state.变量名}}
js中：
this.$store.state.变量名
如何更改state中的值：
推荐按正常步骤
1. this.$store.dispatch('actions中的方法',参数)
2. actions中的方法调用 context.commit('mutations',参数)
3. 在mutations中直接修改state的值
可以跨过任何一步（但最好按照流程编写）
this.$store.commit()
this.$store.state.变量名
VueRouter
- Router:官方提供用来实现spa的 vue插件
- 实现了单页面应用,就是在一个index.html中页面切换有跳转效果
- 本质上是做了路由的控制
基础使用
创建vue项目时，自定义选项选择了Router即可直接使用Router
如果之前没有安装的话:
npm install vue-router --save
在项目中创建router包，写个index.js，把下方的代码copy过来
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
// 以后添加路由，就是模仿上面的home写对象，导入vue文件，更改路由路径，然后写上对应的vue文件名称
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
// 这里跟我们创建时候的配置选项有关，有一个地方询问我们是否开始这个历史模式，还有一个配置是询问我们项目依赖在哪个位置
routes
// 这就是我们上面定义的存储路由信息的数组
})
export default router
// 这里我们把VueRouter产生的对象导出
main.js中也需要进行注册:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
路由需要有对应的vue视图组件进行搭配！
路由跳转两种方式
<router-link> 跳转用
<router-view/> 替换页面组件用
我们可以在app.vue中看到,之前我们也介绍过它们的作用
// 点击跳转路由两种方式
js控制
this.$router.push('路径')
标签控制
<router-link to="/home">
<button>点我跳转到home页面</button>
</router-link>
js控制实现登录跳转代码
<template>
<div>
<button @click="goLogin">点我跳转到登录</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
obj: {name: 'login', query: {name: 'xiaoming'}, params: {id: 999}}
}
},
methods: {
goLogin() {
// js 控制的跳转 ,跳转到login页面
this.$router.push('/login/')
}
},
}
</script>
| 代码 | 作用 |
|---|---|
| this.$router.push(path): | 相当于点击路由链接(可以返回到当前路由界面) |
| this.$router.replace(path): | 用新路由替换当前路由(不可以返回到当前路由界面) |
| this.$router.back(): | 请求(返回)上一个记录路由 |
| this.$router.go(-1): | 请求(返回)上一个记录路由 |
| this.$router.go(1): | 请求下一个记录路由 |
标签控制实现路由跳转
<template>
<div>
<router-link :to="/login">
<button>点我跳转到登陆页面</button>
</router-link>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
obj: {name: 'login', query: {name: 'xiaoming'}, params: {id: 999}}
}
},
}
</script>
区分this.$route this.$router
#4 区分this.$route this.$router
-this.$router # new VueRouter对象，实例，可以实现路由的跳转
-this.$route # 是当前路由对象，内部有传入的参数
路由跳转,携带数据的两种方式
/course/?pk=1 带在路径中使用 ? 携带 数据
/course/1/ 路径中分割的数据
我们可以使用对象来携带参数
js控制实现路由跳转
- 第一种方式：/course/?pk=1（这样进行路由跳转，路由会变成这样）
this.$router.push({
name: 'login',
query: {
name: 'lqz',
age: 19
},
})
- 第二种方式：/course/1/ （这样进行路由跳转，路由会变成这样）
this.$router.push({
name: 'login',
params: {
id: 88
}
})
标签实现路由跳转
我们可以在标签上把to这里设置成属性指令，让他传入一个对象，在对象中携带数据
规律也是跟上面js跳转一样的，携带了params的跳转需要在路由层更改路由，
没有携带params的跳转会用？号在路由后面携带数据
监听属性/计算属性
computed 的配置项中编写计算属性
配置项中的写法：
计算属性需要在setup中导入
let fullName = computed(()=>{return firstName+lastName})
计算属性可以改值
let fullName = computed(()=>{return firstName+lastName})
set(newValue){
}
})
监听属性
配置项写法:
-要写在setup中，函数，导入用
watch(变量,()=>{
#变量发生变化就会执行箭头函数
})
watchEffact(()=>{
#使用变量发生变化，这里就会执行
})
生命周期
# Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
- vue2 vue3
beforeCreate ===> beforeCreate
created ===> created
beforeMount ===> beforeMount
mounted ===> mounted
beforeUpdate ===> beforeUpdate
updated ===> updated
beforeDestroy ===> beforeUnmount
destroyed ===> unmounted
beforeDestroy ===改名为===> beforeUnmount
destroyed ===改名为===> unmounted
# Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
beforeCreate ===> setup()
created ===> setup()
beforeMount ===> onBeforeMount
mounted ===> onMounted
beforeUpdate ===> onBeforeUpdate
updated ===> onUpdated
beforeUnmount ===> onBeforeUnmount
unmounted ===> onUnmounted
# 以前写在created中的代码，现在直接写在setup开始即可
let show = ref(false)
axios.get().then(res=>{
show.value=res.data.show
})
toRefs
相当于解压赋值的感觉
# 以后setup的返回值可以直接使用
setup() {
let data = reactive({
name: 'xiaoming',
age: 19,
gender: '男'
})
return {...toRefs(data)}
}
# 以后在模板中直接用 {{name}}
export default {
name: 'App',
setup() {
let data = reactive({
name: 'lqz',
age: 19,
isShow: true
})
function handleShow() {
console.log('ssdaf')
data.isShow = !data.isShow
data.age++
}
return {
...toRefs(data),
handleShow
// data
}
}
}
