vuex 小知识
vuex
由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。vue提供了vuex库进行组件数据管理
vuex的功能
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
vuex 基本组件
store
stata
Getters
Mutations
Actions
Modules
创建一个vuex的数据库
const store = new Vuex.Store({ state: { count: 0 },//存储数据 mutations: { increment (state) { state.count++ } }//函数 })
调用数据
store.commit('increment')//在外部引用时一般用this.$store.commit('increment')
mutations
用来存放函数
引用方式
store.commit('')
载荷
store.commit 传入额外的参数,即 mutation 的 载荷(payload)
const store= new Vuex.Store({ state:{ count:0, nub1:2, nub2:3 }, mutations:{ jia(state,arg){ state.count+=arg.n }, jian(state,arg){ state.count-=arg.n } }, })
Getters 与 action
- Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。就像计算属性一样,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。//依赖于mutations
Action 与mutations关系
乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action 就不受约束!我们可以在 action 内部执行异步操作:
下面例举两在computed中的运用方式
computed:
computed:{ ...Vuex.mapState(['count','nub1','nub2']), ...Vuex.mapGetters(['he']) },
相关推荐
CSCCockroach 2020-09-15
lbPro0 2020-07-05
MrSunOcean 2020-06-21
lylwanan 2020-06-14
Callmesmallpure 2020-05-31
ShaLiWa 2020-05-25
墨龙吟 2020-04-24
MrSunOcean 2020-04-24
H女王范儿 2020-04-22
lbPro0 2020-04-16
ShaLiWa 2020-02-29
ShaLiWa 2020-01-17
MrSunOcean 2020-01-03
lbPro0 2020-01-01
H女王范儿 2019-12-29