vue之我不会计算属性 vuex 路由插槽

一、计算属性

定义：
例子：

注意：调用计算属性时，不可以带括号，那样调用的就是方法，如：以下调用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是vm
						return 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.$store
 2.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) {
    // 一秒后, 给一个数, 去修改 num
    setTimeout(() => {
      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', //默认是hash
    routes:[]
})

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

四、插槽官网讲的比较好

黑马的视频作用域插槽讲的也不错

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和
slot-scope（elementUI中目前还在使用）这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。

1.插槽内容

组件

<navigation-link url="/profile">
  Your Profile
</navigation-link>

插槽

<navigation-link>
	<a v-bind:href="url" class="nav-link">
	  <slot></slot>
	</a>
<navigation-link>

最终渲染：当组件渲染的时候，将会被替换为“Your Profile”

<navigation-link url="/profile">
	<a v-bind:href="url" class="nav-link">
	  Your Profile
	</a>
<navigation-link>

2.后备内容

组件没有向插槽传递数据是，插槽有个默认的（后备的），不至于组件不会像插槽传数据

<solt>嘿嘿嘿，就知道你会不传递数据给我，这就是我的后备内容<slot>

3.具名插槽

就是有名字的插槽
上面使用插槽只使用了一个<slot><slot>所以不需要指定名称
而接下来的插槽是多个<slot><slot>标签, 并且为<slot>标签起名字<slot name="soltName">，如果不写默认名字为default，所以组件再向插槽传递数据时就要对号入座
组件在向插槽传递数据时，使用<template></template>标签包裹数据，在<template>标签中指定，要为那个插槽传递数据<template v-slot:soltName>向名为soltName插槽传递数据<template>
如果没有<template>标签包裹，那么会将组件标签中的所有数据，都会传递给名为defalut的插槽或者没命名的插槽

例子：
插槽：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

组件:

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  **上面两行等价于**
  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

渲染:

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

4.作用域插槽

自 2.6.0 起有所更新。已废弃的使用 slot-scope（目前Element UI还有用到）
作用域插槽：定义插槽的同时，是可以传递数据的，给插槽上可以绑定数据
比如：组件（父）给插槽（子）传递的是<button><button>标签，现在button需要用到父组件中的数据id，这可怎么办，所以在传递时将<button>和id一起传递给插槽（或者理解为：将<button>传递给插槽，将id传递给<button>），这就是作用域插槽，组件（父）中的数据在插槽（子）中被使用，id的作用域发生了变化，所以叫作用域插槽。
场景（下图）： 4.5.6是使用作用域插槽的步骤
1.父传子表格中的数据
2.利用默认插槽定制操作列
3.操作列再删除时，需要用到当前项的id（属于组件内部数据）
在这里插入图片描述
4. 向删除（插槽）绑定组件中的数据，数据以添加属性的方式传递

<slot :id="item.id" msg="测试文本"></slot>

5. 所有添加的属性，都会被收集到一个对象中，在组件使用时进行接收

{id: 3,msg: "测试文本"}

6. 在template，通过#插槽名=“obj”（v-slot:插槽名=“obj”）接收，默认插槽名为default，obj是任意起个名字，接收数据以属性的方式传递过来的数据对象（第五点中的数据）

<MyTable>
	<template #default="obj"> 这里的obj父组件中传递过来的数据对象，类似第5点中的数据
		<button @click="del(obj.id)">删除</button>
	</template>
</Mytable>

4.5.6是使用作用域插槽的步骤