vuex应用的核心就是store(仓库),“store”基本上就是一个容器,它包含着你的应用中大部分的状态。
vuex和单纯的全局对象的不同点:
1.vuex的状态存储是响应式的,store状态发生变化的时候,其对应的组件也会高效更新;
2.不能直接修改store的状态,修改它唯一的途径就是显示的提交mutation,方便跟踪每个状态的变化。
state
vuex可以通过state获取相应状态,为了方便组件更好的调用可以写到计算属性里
简单写法:
import { mapState } from 'vuex'
computed: {
...mapState(['age'])
}
getter
用于从store中派生出一些状态,getter的返回值会根据它的依赖被缓存起来,只有当它的依赖值发生改变才会被重新计算
使用方法类似state:
this.$store.getters.isAdult
简单写法:
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['isAdult'])
}
mutation
它是更改vuex的store中的状态的唯一方法。它类似于事件,每个mutation都有一个字符串的事件类型和一个回调函数。
回调函数第一个参数是state,第二个参数是载荷(payload),载荷一般是个对象
必须是同步函数
其实直接赋值也可以修改状态,在vuex实例新增属性strict:true属性可以禁止直接修改,但是只能用于开发环境。
简单写法:
import { mapMutations } from 'vuex'
methods: {
...mapMutations(['updateAge'])
}
mounted: function () {
this.updateAge(26)
}
action
类似于mutation,不同在于:
action提交的是mutation,而不是直接更改状态
action可以包含任意异步操作
简单写法:
import { mapActions } from 'vuex'
methods: {
...mapActions(['updateAgeAsync'])
}
mounted: function () {
this.updateAgeAsync({
age: 12,
time: 2000
})
}
模块
state
使用方法