7、VUEX
VUEX是什么
vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
vuex的核心概念
state提供唯的公共数据源,所有共享的数据都要统一放到 Store的 State中进行存储。
1 | export default new Vuex.Store({ |
使用方式
通过
this.$store.state
访问属性1
<h3>当前最新的Count值为:{{ $store.state.count }}</h3>
在
template
模板中可以省略this导入模式
通过计算属性
1
2
3
4
5
6
7
8
9import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
}
}此时就可以把count当作成为一个计算属性。
Mutation用于变更store的数据。但不能使用异步操作
在vuex对象中定义方法
1 | mutations: { |
在组件中调用
1 | methods: { |
方法也可以传递参数,在mutations
方法接受参数时第一个参数总是state
,之后可以在调用时传入参数
1 | addN (state, step) { |
1 | addN (step) { |
1 | <button @click="addN(3)">+3</button> |
Mutation
同样可以映射成组件的方法。
1 | import { mapMutations } from 'vuex' |
如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据
1 | actions: { |
1 | AsyncAdd () { |
actions也可以携带参数,方法与Mutation
类似。同样可以使用导入的方式
1 | import { mapActions } from 'vuex' |
Getter用于对 Store中的数据进行加工处理形成新的数据
1 | getters: { |
直接使用
1
this.$store.getters.名称
导入使用
1
2
3
4import { mapGetters } from 'vuex'
computed: {
...mapGetters(['showNum'])
}
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小康博客!
评论
TwikooWaline