vuex辅助函数
为什么使用辅助函数
可以对当前store实例里边数据进行调用时候 不再使用this.$store 就可以直接获取里边的数据
辅助函数有几个
四个
mapState
使用步骤
state: {
num: 0
}
1 引入mapState
import {mapState} from 'vuex'
2 在computed计算属性中 使用mapState
1 对象
computed: mapState({
自定义属性名: 'state中属性名'
})
2 数组
computed: mapState(['state中属性名'])
3 页面渲染 直接编写computed里边自定义属性名
<标签名>{{state中属性名}}</标签名>
注意:
为什么要使用扩展运算符
...
使用扩展运算符 可以让我们在computed里边编写更多的计算属性
computed: {
...mapState({
})
}
mapGetters
使用步骤
state: {
num: 0
}
1 引入mapGetters
import {mapGetters} from 'vuex'
2 在computed计算属性中 使用mapGetters
1 对象
computed: mapGetters({
自定义属性名: 'getters方法名'
})
2 数组
computed: mapGetters(['getters方法名'])
3 页面渲染 直接编写computed里边自定义属性名
<标签名>{{自定义属性名}}</标签名>
注意:
为什么要使用扩展运算符
...
使用扩展运算符 可以让我们在computed里边编写更多的计算属性
computed: {
...mapGetters({
})
}
mapMutations
mutations: {
changeNum(){
}
}
1 引入mapMutations
import {mapMutations} from 'vuex'
2 在methods方法中 使用mapMutations
1 对象
methods: mapMutations({
自定义属性名: 'mutations方法名'
})
2 数组
methods: mapMutations(['mutations方法名'])
3 页面渲染 直接编写methods里边自定义属性名
<标签名>{{自定义属性名}}</标签名>
注意:
为什么要使用扩展运算符
...
使用扩展运算符 可以让我们在methods里边编写更多的方法
methods: {
...mapMutations({
})
}
mapActions
mapActions与mapMutations用法一样
Vuex辅助函数
最新推荐文章于 2024-04-12 10:45:03 发布