一切福田，不離方寸，從心而覓，感無不通。

vue高级进阶

Vuex

1.state的使用

首先在src文件夹下面建一个store文件夹作为仓库
store里创建一些js文件作为相对应的存储空间
例如 store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.store({
state: {                   //状态管理
  count: 1
},
getters: {                //获取状态值
  getCount: function(state){
    return state.count * 5
  }
},
mutations: {         //操作状态
  add: function(state){
    state.count += 1
  }
},
actions: {            //异步操作状态
  addFun: function(context){
    context.commit('add')
  }
}
})

 

在vue组件中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在插值表达式里  {{$store.state.count}}
computed:{
count(){
return this.$store.state.count
}
}
更新state的值
methods: {
  change(){
    this.$store.commit('add',args)    //同步操作，可以有选择性的传参
  },
  asyncChange() {
    this.$store.dispatch('addFun')   //异步操作
  }
}

 

2.mapState的使用

1.在.vue组件中引入,在js块中引入

1
import { mapState } from 'vuex'

 

2.在.vue组件中使用，一般放在computed里可以监听到状态改变

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
33
34
35
36
37
38
39
40
41
42
43
computed：{
  ...mapState([        //mapState本是一个函数，在里面写一个数组，记得加...
    ‘num’ ， //存的数据
    ‘id’
  ])
}
或
computed: {
  ...mapState({
    num: (state)=>state.num,     //这种用法可以看作为起别名
    id: (state)=>state.id
  })
}
 
mapAction的使用
正常action的使用
this.$store.dispatch('function',args)
 
mapAction
import {mapActions} from 'vuex'
methods: {
...mapActions(['fun1','fun2','fun3'])
或
...mapActions({
  fun1: 'fun1',
  fun2: 'fun2'
  })
}
 
mapMutations的使用  //关于传参问题，直接在调用的地方传参
正常mutation的使用
this.$store.commit('function',args)
 
mapMutations的使用
import {mapMutations} from 'vuex'
methods:{
...mapMutations(['fun1','fun2'])
或
...mapMutations({
  fun1: 'fun1',
  fun2: 'fun2'
})
}

 

混入 (mixin)

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
**组件的思想主要是用来解决重复码有相似功能的代码，并使其标准化，统一化，但在前端更多是体现在界面上的视觉效果，如果要实现功能大体相同，界面需要个性化，但又不想传入过多的props怎么办呢
这时mixin便有了其用武之地，可以使用相同的js逻辑，template和css自定义就好了**

具体使用：
先在src下建一个文件夹mixin
然后在该文件夹下创建你需要按功能取名的js文件
例如common.js

1
2
3
4
5
6
7
8
9
const toggle = {      //你需要引入哪些就加哪些
data(){
return {}
},
created(){},
methods:{}
...                        //还可以添加  
}
export toggle

 

在.vue文件中使用

1
2
3
4
import { toggle } from '@/mixin/common.js'
export default {
mixins: [toggle]
}

 

注意：如果混入里的东西和组件内的有冲突，会使用组件内的，欲安内必先攘外

全局混入
在main.js中定义

1
2
3
4
5
Vue.mixin({
  created: function () {
  }
  ...     //  省略
})

 

from:https://segmentfault.com/a/1190000020617036

Copyright © 2025 Longsheng All rights reserved