vue之我不会

一、计算属性

例子：

注意：调用计算属性时，不可以带括号，那样调用的就是方法，如：以下调用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 store

2.在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 获取数据

1. 第一步：导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2. 第二步：采用数组形式引入state属性

mapState(['count']) 

前两部代码类似于

count () {return this.$store.state.count
}

3. 第三步：利用展开运算符将导出的状态映射给计算属性

  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 router

2.重定向

{ 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