一、计算属性
例子：
注意：调用计算属性时，不可以带括号，那样调用的就是方法，如：以下调用
fullName时不可funnName()
<div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>测试：<input type="text" v-model="x"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/><!-- 全名：<span>{{fullName}}</span> <br/><br/> //在调用fullName就是从内存里面取了全名：<span>{{fullName}}</span> <br/><br/>全名：<span>{{fullName}}</span> --></div>data:{firstName:'张',lastName:'三',x:'你好'}computed:{fullName:{//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log('get被调用了')// console.log(this) //此处的this是vmreturn this.firstName + '-' + this.lastName},//set什么时候调用? 当fullName被修改时。set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}
简写：
二、vueX
1.安装
vue默认vue3版本，vuex默认vuex4版本，vuex4只能在vue3中使用，在vue2中能使用vuex3,那么不能默认下载最新的版本
如果你出现了版本的问题只需要npm install vuex@3 --save重新安装对应版本就好的
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {token: ''},mutations: {updateToken (state, newToken) {state.token = newToken}}
})
export default store2.在main.js中
import store from '@/store'
new Vue({router,store, //<<<<<<--------这里render: h => h(App)
}).$mount('#app')
3.src/store/index.js
注意大写
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {count: 123},getters: {},mutations: {addCount (state,count) {state.count += count}},actions: {},modules: {}
})2.Store => state
2.1获取 store仓库：
1.Vue模板中获取 this.$store2.js文件中获取 import 导入 store
2.2获取状态state数据：
模板中： {{ $store.state.xxx }}
组件逻辑中： this.$store.state.xxx
JS模块中： store.state.xxx
computed: {token(){return this.$store.state.count}}
每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢？
2.2通过辅助函数mapState 获取数据
- 第一步：导入mapState (mapState是vuex中的一个函数)
import { mapState } from 'vuex'
- 第二步：采用数组形式引入state属性
mapState(['count'])
前两部代码类似于
count () {return this.$store.state.count
}
- 第三步：利用展开运算符将导出的状态映射给计算属性
computed: {...mapState(['count'])}
3.Store=>mutations
mutations是一个对象，对象中存放修改state的方法
3.1组件中提交
handle ( ) {this.$store.commit('addCount', 10)
}
小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象
this.$store.commit('addCount', {count: 10
})
3.2通过辅助函数 mapMutations提交
import { mapMutations } from 'vuex'
methods: {...mapMutations(['addCount'])
}
上面代码的含义是将mutations的方法导入了methods中，和参没关系，等价于
methods: {// commit(方法名, 载荷参数)addCount () {this.$store.commit('addCount')}}
3.3调用
<button @click="addCount">值+1</button>
4. Store=>actions
actions则负责进行异步操作
如: 一秒钟之后, 要给一个数 去修改state
4.1 定义actions
mutations: {changeCount (state, newCount) {state.count = newCount}
}
actions: {setAsyncCount (context, num) {// 一秒后, 给一个数, 去修改 numsetTimeout(() => {context.commit('changeCount', num)}, 1000)}
},
4.2 组件中通过dispatch调用
setAsyncCount () {this.$store.dispatch('setAsyncCount', 666)
}
4.3辅助函数 -mapActions
import { mapActions } from 'vuex'
methods: {...mapActions(['changeCountAction'])
}
上面代码的含义是将actions的方法导入了methods中，等价于
methods: {changeCountAction (n) {this.$store.dispatch('changeCountAction', n)},
}
4.4调用
<button @click="changeCountAction(200)">+异步</button>
5.Store=>getters
除了state之外，有时我们还需要从state中筛选出符合条件的一些数据，这些数据是依赖state的，此时会用到getters
例如，state中定义了list，为1-10的数组
state: {list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它
5.1定义getters
getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList: state => state.list.filter(item => item > 5)}
5.2原始方式-$store
<div>{{ $store.getters.filterList }}</div>
5.3辅助函数 - mapGetters
computed: {...mapGetters(['filterList'])
}
5.4调用
<div>{{ filterList }}</div>
6.小结
三、路由
1.引入
import router from './router/index'
...
new Vue({render: h => h(App),router
}).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',redirect: '/home'}, //重定向，默认打开是/然后跳转到 /home{ path: '/home',name: 'Home',component:() => import('../views/home.vue')},{ path: '*', component: () => import('@/views/error/error') } //放到最后
]const router = new VueRouter({mode:'history', // 默认是hash history常用 会把路径中的#消除routes
})export default router2.重定向
{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }
3.404
routes: [...{ path: '*', component: NotFind } //最后一个]
4.Vue路由-模式设置
路由的路径看起来不自然, 有#，能否切成真正路径形式?
- hash路由(默认) 例如: http://localhost:8080/#/home
- history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)
const router = new VueRouter({mode:'histroy', //默认是hashroutes:[]
})
5.两种路由跳转方式
- path 路径跳转 （简易方便）
- name 命名路由跳转 (适合 path 路径长的场景)
5.1path路径跳转语法
简易方便
//简单写法
this.$router.push('路由路径')//完整写法
this.$router.push({path: '路由路径'
})
5.2path跳转方式
特点：适合 path 路径长的场景
{ name: '路由名', path: '/path/xxx', component: XXX }
跳转
this.$router.push({name: '路由名'
})
6.两种传参方式
① path 路径跳转传参
② name 命名路由跳转传参
6.1path路径跳转传参（query传参）
//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})
接受参数的方式依然是：
$route.query.参数名
6.2path路径跳转传参（动态路由传参）
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({path: '/路径/参数值'
})
接受参数的方式依然是：$route.params.参数值
注意： path不能配合params使用
7.嵌套（多级）路由
在一级路由下，配置children属性
const router = new VueRouter({routes: [{path: '/parent',component: Parent,-----------------------------------------------------| | children:[| //children中的配置项 跟一级路由中的配置项一模一样 | { path: 'son1',component: xxxx.vue },| { path: 'son2',component: xxxx.vue }| ]|-----------------------------------------------------}]
})
注意：二级路由，或者说是子路由，路径不要
/如上面的 son1、son2
上面的路由路径是：
/parent/son1
/parent/son2
