Npm install

1
2
npm install -S vue
npm install -S vuex

Vuex

root组件处进行store注册注入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Vue.use(Vuex)
const store = new Vuex.Store(storeParams)
const storeParams = {
state:{
point: [55,90,29,66,86,85,99],
count: 0
}
getters:{
pointBoder(state){
const maxPoint = Math.max.apply(null, state.point)
return maxPoint-20 //最高分以下20分被认为是高分的边界
},
highPoints(state, getters){
const pointBorder = getters.pointBoder
return state.point.filter(item => item > pointBorder)
}
}
mutations:{
// 'increament'称为事件类型 对应方法称为回调函数
increament(state, { baseNum = 1 }){
state.count += payload.baseNum
}
}
actions:{
asyncIncreament({ commit }){
setTimeout(()=>{
commit('increament')
},1000)
}
}
}

Vue组件中使用状态管理数据

1
2
3
4
this.$store.state //获取state
this.$store.getters //获取gettter
this.$store.commit(type, payload) // 提交mutation 更新state
this.$store.dispatch(type, payload) // 提交action 更新state

Tips

1.vue组件中展示store状态,在计算属性中并使用this.$store访问。
2.Vue.use(Vuex) 并在根实例中注册store,值为new Vuex.Store(storeParams),选项提供了一种机制将状态从根组件“注入”到每一个子组件中。
3.getters可认为是store的计算属性,且和计算属性一样会根据依赖被缓存,接受state作为其第一个参数,接受其他 getter 作为第二个参数。 实现给getter传参,让getter返回一个函数即可。

1
2
3
4
5
6
7
8
const storeParams = {
getters: {
attachParams: (state) => (name) => {
return `name:${name},website:${state.site}`
}
}
}
this.$store.getters.attachParams('aszero')

4.mapStatemapGetters返回一个对象,可以使用对象展开运算符进行computed的混入。

1
2
3
4
5
6
7
8
9
import { mapState , mapGetters} from 'vuex'
computed: {
...mapGetters({
hp: 'highPoints' // 把 `this.hp` 映射为 `this.$store.getters.highPoints`
}),
...mapState({
p: 'point' // 把 `this.p` 映射为 `this.$store.state.point`
})
}

5.mutation必须是同步函数。
6.computed必须有return, 调用computed时候直接执行computed内逻辑并返回return值,computed只对data负责,data变更驱动computed更新状态。getters类似于computedstate类似于data
7.Action 提交的是 mutation,而不是直接变更状态,包含任意异步操作。action接受context参数,和store实例具有相同的属性和方法。

1
2
3
4
5
6
7
8
9
10
const storeParams = {
actions: {
doSome1(context){
//...
},
doSome2({ state, getters, commit, dispath }){
//...
}
}
}

8.stategetter在vue组件的computed中调用,便于在提交状态后更新;mutationaction一般在methods中封装调用。

Vue plugins

通过Vue.use全局方法使用插件

1
2
3
4
// main.js
import Vue from 'Vue'
import VueToast from './plugins.js'
Vue.use(VueToast)

插件为一个对象,内有public方法install,方法参数为构造器Vue和可选参数options
通过参数Vue可以做很多事情
1.直接绑定属性方法到全局构造器上使用

1
Vue.dosomthing = ()=>{}

2.绑定属性方法到Vue实例,这样可以在实例中可以通过this访问

1
Vue.prototype.dosomthing = ()=>{}

3.mixin全局混入 mixin文档

1
2
3
4
5
Vue.mixin({
methods:{
dosomthing(){}
}
})

4.添加资源,指令directive、过滤filter、过渡等。 自定义指令文档 过滤器文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 自定义指令
// 只有bind、update勾子函数的简写,不考虑其他勾子函数
Vue.directive('dosome',(el,{name,value,expression,arg,modifiers},vnode,oldVnode)=>{
console.log(JSON.stringify({
el, // 指令所绑定的DOM元素
name, // 指令名,不包括 v- 前缀
value, // 指令的绑定值,计算值
expression, // 字符串形式的指令表达式
arg, // 传给指令的参数
modifiers // 包含修饰符的对象
}))
})
// v-dosome:foo.a.b = dosome
// ------ --- --- ------
// name arg mod expression

一个toast 插件例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//plugins.js
export default {
install (Vue, options) {
Vue.prototype.$vueToast = (msg, timeout) => {
// 创建可复用可拓展的组件构造器
const Toast = Vue.extend({
template: `<div class="vue-toast-fix"><div class="vue-toast-content">${msg}</div></div>`
})
// 在文档内渲染为:
// new Toast().$mount('body')或
// new Toast({el:'body'})
const toastTpl = new Toast().$mount().$el // 文档外渲染
document.body.appendChild(toastTpl)
setTimeout(function () {
document.body.removeChild(toastTpl)
}, timeout || 2000)
}
}
}

Vue-router

路由导航

  • router-link被渲染成a标签
  • to 指定链接,对应routes里的path
1
2
3
4
5
<router-link to='/index'></router-link>
<router-link to='/discovery'></router-link>
<router-link to='/home/vip/list'></router-link>
<router-link to='/home/user/list/1'></router-link>
<router-link to='/home/user/passport'></router-link>

路由渲染出口

1
2
3
4
5
// 默认视图
<router-view />
// 命名视图
<router-view name='viewA'/>
<router-view name='viewB'/>

路由守卫

  • 全局前置守卫 beforeEach 对应后置守卫afterEach, 无next参数
    只要路由发生变更就会进入勾子函数。
  • 路由独享守卫 beforeEnter
    只有进入当前路由时会进入勾子函数。
  • 组件内守卫 beforeRouteUpdate
    在无全局前置守卫时候,若动态路径参数渲染相同组件,组件复用的情况下,无法触发当前路由守卫。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//全局前置守卫
router.beforeEach((to, from, next) => {})
//路由独享守卫
new VueRouter({
routes: [{
path: '/home',
component: HomeView,
beforeEnter: (to, from, next) => {}
}]
})
//组件内守卫
const HomeView ={
template:'',
beforeRouteUpdate: (to, from, next) => {}
}

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
// 动态路径参数,复用组件
path: '/home/:channel',
component: ChannelView,
beforeEnter: (to, from, next) => {
console.log('home路由独享守卫:', to, from)
next()
},
// 嵌套路由,路由出口<router-view> 在 ChannelView 内
children:[{
path: 'list/:eq',
component: HomeVideoListView
},{
path: 'passport',
component: HomePassportView
}]
},{
path: '',
components: { // 这里是components
viewA: IndexSideView,
viewB: IndexContentView
}
},{
path: '/audi',
alias: ['/dengchang','/sihuan'] //别名
component: DiscoveryView
}]
})

$route $router

$route 路由对象
路由对象是不可变 (immutable) 的,每次成功的导航后都会产生一个新的对象

$router 访问全局路由器

vue文档链接

vue-api
vue-cli-3.0-config
vuex
vue-plugins

原创内容,欢迎交流转载请注明出处