【总结】vue相关集合

一、Vuex

1、访问 “state状态对象” 的3种方法

store.js

在store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 状态对象
const state={
	count:1
}
// 修改状态的方法
const mutations={
   add(state){
      state.count++   
   },
   reduce(state){
     state.count--   
   }
}
export default new Vuex.Store({
	state,mutations
})

1、方法一：标签取值法

在store.vue
<template>
	<view>
		<view class="c3">{{$store.state.count}}</view>
        <button @click="$store.commit('add')">+</button>  // commit 提交函数
		<button @click="$store.commit('reduce')">-</button>
	</view>
</template>

<script>
	import store from '@/vuex/store.js'
	export default {
		data() {
			return {
				
			};
		},
		store
	}
</script>

在之前的基础上，取到count值的方法

2、方法二：computed取值法

<view class="c3">{{$store.state.count}}-{{count}}</view>

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

3、方法三：computed:mapState([' '])取值法

import { mapState } from 'vuex'

写法一
computed:mapState({
   count:state=>state.count
   // count:function(state){
	// return state.count
   // }
})

写法二
computed:mapState(['count'])

2、mutations触发传值

1、方法一：标签取值法

store.js
// 修改状态的方法
const mutations={
   add(state,n){
      state.count+=n   
   }
}


<button @click="$store.commit('add',10)">+</button>

2、方法二：methods:mapMutations([' ']) 取值法

store.js
// 修改状态的方法
const mutations={
   reduce(state){
     state.count--  
   }
}


<button @click="reduce">-</button>

import { mapMutations } from 'vuex'
methods:mapMutations(['add','reduce'])

3、getters计算过滤属性

store.js
// 计算过滤属性，相当于computed
const getters={
	count:function(state){
		return state.count+=100
	}
}


import { mapGetters } from 'vuex'
// 快捷运算符 ... 扩展
computed:{
	count(){
		return this.$store.getters.count
	}
	// ...mapGetters(['count'])
}

4、actions异步修改状态

store.js
// 异步修改状态，actions可调用mutations
const actions={
	addAction(context){
		context.commit('add',10)
		setTimeout(()=>{context.commit('reduce')},5000)
		console.log('我比reduce先执行了')
	},
	reduceAction({commit}){
		commit('reduce')
	}
}


<button @click="addAction">+</button>
<button @click="reduceAction">-</button>

import { mapActions } from 'vuex'
methods:{
	...mapActions(['addAction','reduceAction'])
}

5、module模块组，用的少不推荐

store.js
const moduleA={
	state,mutations,getters,actions
}
const moduleB={
	state,mutations,getters,actions
}

export default new Vuex.Store({
	modules:{a:moduleA,b:moduleB}
})


<view class="c3">{{$store.state.a.count}}-{{count}}</view>

二、router-link

1、引入组件路径的2种写法

在router下的index.js中

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // 写法一：引入组件

Vue.use(Router)

export default new Router({
  routes:[
     // 写法一
     {
        path:'/',
        name:'hello',
        component: Hello
     }
     // 写法二
     {
        path:'/',
        name:'hello',
        component: resolve => require(['@/components/Hello'], resolve)
     }
  ]
})

2、子路由

在router下的index.js中

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import H from '@/components/H'
import H1 from '@/components/H1'
import H2 from '@/components/H2'

Vue.use(Router)

export default new Router({
  routes:[
     {
        path:'/',
        name:'hello',
        component: Hello,
        children:[
          {path:'/h',name:'h',component: H},
          {path:'/h1',name:'h1',component: H1},
          {path:'/h2',name:'h2',component: H2}
        ]
     }
  ]
})


在app.vue
<template>
  <div>
    <div>{{msg}}</div>
    <router-link to="/">首页</router-link>
    <router-link to="/h">h页</router-link>
    <router-link to="/h1">h1页</router-link>
    <router-link to="/h2">h2页</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'my is app',
    }
  }
};
</script>

在H.vue
<template>
  <div>
    <div>{{msg}}</div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'my is H',
    }
  }
};
</script>

3、传递参数name/router-link两种方法

name传参不常用

// 获取路由中的 name 的参数值
<p>{{$route.name}}</p>

 router-link传参

App.vue中传递
<router-link :to={name:'h1',params:{username:'xqq',id:'02'}></router-link>

H1.vue中接收
<div>编号：{{$route.params.id}}，姓名:{{$route.params.username}}</div>

4、单页面多路由

router.js
import H from '@/views/H'
import H1 from '@/views/H1'
import H2 from '@/views/H2'

export default new Router({
  routes:[
     {
        path:'/',
        name:'h',
        components: {
          default:H,
          left:H1,
          right:H2
       }
     }
  ]
})

app.vue
<template>
  <div id="app">
    <router-view />
    <router-view name="left" style="float:left;background:#ccc; width:50%;height:200px" />
    <router-view name="right" style="float:right;background:#0cf; width:50%;height:200px"/>
  </div>
</template>

5、url传递参数

router.js
import Home from '@/views/Home'
import Params from '@/views/params'

export default new Router({
  routes:[
     {
       path: '/home',
       name: 'home',
       component: Home
     },
     {
       path: '/params/:id(\\d+)/:text', // (\\d+)正则
       name: 'params',
       component: Params
     },
  ]
})

app.vue
<template>
  <div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/params/32/my name is xqq">url传参</router-link>
    <router-view />
  </div>
</template>

params.vue
<template>
  <div>
    <div>id:{{$route.params.id}}</div>
    <div>text:{{$route.params.text}}</div>
  </div>
</template>

6、redirect重定向（路径相同，传值时内容不同，不传值时相同）

router.js
import Home from '@/views/Home'
import Params from '@/views/params'

export default new Router({
  routes:[
     {
       path: '/home',
       name: 'index',
       component: Home
     },
     {
       path: '/params/:id/:text',
       name: 'params',
       component: Params
     }
     {
       path: '/goHome',
       redirect:'/home'
     },
     {
       path: '/toParams/:id/:text',
       redirect: '/params/:id/:text'
     }
  ]
})

app.vue
<template>
  <div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/params/23/my name is xqq">params</router-link>
    <router-link to="/toParams/10/my name is params">toParams</router-link>
    <router-link to="/goHome">goHome</router-link>
  </div>
</template>

 7、alias别名，即路由的别名（路径不同，内容相同）

坑：根目录下，起别名不起作用，如：path:’/‘

router.js
import H1 from '@/views/H1'

export default new Router({
  routes:[
     {
       path: '/h1',
       component: H1,
       alias:'/hi1'
     }
  ]
})

app.vue
<template>
  <div id="app">
    <router-link to="/h1">H1</router-link>
    <router-link to="/hi1">Hi1</router-link>
  </div>
</template>

8、路由过渡动效

mode的属性值：out-in先退出再进入；in-out先进入再退出

app.vue
<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<style>
.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  transition: opacity .5s;
}
.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  opacity: 0;
  transition: opacity .5s;
}
</style>

9、通过mode设置模式history和hash(#)/404页面

router.js
import H1 from '@/views/H1'

export default new Router({
  mode: 'history',
  routes:[
     {
       path: '/h1',
       component: H1,
       alias:'/hi1'
     }
  ]
})

404页面处理，路径不存在也会报404

router.js
import Error from '@/views/error'

export default new Router({
  routes:[
     {
        path: '*',
        component: Error
     }
  ]
})

error.vue
<template>
  <div>
    <div>{{msg}}</div>
    <div>页面不存在 </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

app.vue
<template>
  <div>
    <router-link to="/dfhfd">我是瞎写的</router-link>
  </div>
</template>

10、路由配置文件中的钩子函数

写法一：beforeEnter

router.js
import Params from '@/views/params'

export default new Router({
  routes:[
     {
        path: '/params/:id/:text',
        name: 'params',
        component: Params,
        beforeEnter:(to,from,next)=>{
           console.log(to)
           console.log(from)
           next()
        }
     }
  ]
})

写法二：beforeRouteEnter、beforeRouteLeave

params.vue
<script>
export default {
  data() {},
  beforeRouteEnter:(to, from, next)=>{
    console.log('准备进入params')
    next()
  },
  beforeRouteLeave:(to, from, next)=>{
    console.log('准备离开params')
    next()
  }
}
</script>

11、编程式导航（函数导航）

app.vue
<template>
  <div>
    <button @click="goBack">后退</button>
    <button @click="goGo">前进</button>
    <button @click="goHome">返回首页</button>
  </div>
</template>

<script>
export default {
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    goGo(){
      this.$router.go(1)
    },
    goHome(){
      this.$router.push('/home')
    }
  }
};
</script>

       希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~