目录状态管理模式Mutation需遵守Vue的响应规则Vuex是专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预
Vuex
是专为vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说:Vuex
是Vue
框架中状态管理
图中绿色虚线包裹起来的部分就是Vue
的核心,state
中保存的就是公共状态,改变state
的唯一方式就是通过mutations
进行更改
把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,组件数构成了一个巨大的视图,不管在树的哪个位置,任何组件都能获取状态或者触发行为,这就是状态管理模式。
应用场景有:单页应用中,组件之间的数据状态
应用实例:
Vuex
的属性
state
Vuex
就是一个仓库,仓库里面放了很多对象,其中state
就是数据源存放地,对应一般Vue
对象里面的data
state
里面存放的数据是响应式的,Vue
组件从store
中读取数据,若是store
中的数据发生改变,依赖这个数据的组件也会发生更新mapState
把全局的state
和getters
映射到当前组件的computed
计算属性中getters
getters
可以对state
进行计算操作,它就是store
的计算属性getters
可以在多组件之间复用getters
Mutations
每个mutations
都有一个字符串的事件类型(type)和一个回调函数(handler),这个回调函数就是实际进行状态修改的地方,并且它会接收state
作为第一个参数:
const store = new Vuex.Store({
state:{
count:1
},
mutations:{
increment(state){
//变更状态
state.count++
}
}
})
不能直接调用一个mutation handler
。这个选项更像是事件注册,当触发一个类型为increment
的mutations
时,调用此函数。要唤醒一个mutation handler
,需要调用相应的type
调用store.commit
方法
store.commit('increment')
提交载荷(payload)
可以向store.commit
传入额外的参数,即mutation
的载荷(payload)
state:{
count:0
},
mutations:{
increment(state,n){
state.count += n
}
}
//组件
store.commit('increment',10)
在大多数情况下,载荷应该是一个对象,这安样可以包含多个字段并且记录的mutation
会更易读
state:{
count:0
},
mutations:{
increment(state,payload){
state.count += payload
}
}
//组件
store.commit('increment',{
amount:10
})
既然Vuex的store中的状态时响应式的,那么当我们变更状态时,监听状态的Vue组件也会自动更新。这也意味着Vuex中的mutation需要与使用Vue一样遵守一些注意事项:
最好提前在store
中初始化好所有所需属性
当需要在对象上添加新属性时,应该
mutation必须是同步函数
使用Vue.set(obj,'newProp,123)
以新对象替换老对象。例如,利用对象展开运算符
state.obj = {...state.obj,newProp:123}
actions
action类似于mutation,不同在于:
action通过store.dispatch
方法触发
store.dispatch('increment')
在action
内部执行异步操作
actions:{
incrementAsync({commit}){
setTimeout(() => {
commit('increment')
},1000)
}
}
action
同样支持载荷方式和对象方式进行分发
//以载荷形式分发
store.dispatch('incrementAsync',{
amount:10
})
//以对象形式分发
store.dispatch({
type:'incrementAsync',
amount:10
})
action
提交的是mutation
,而不是直接变更状态action
可以包含任意异步操作module
module
可以让每个模块拥有自己的state
、mutations
、action
、getters
使得结构非常清晰,方便管理
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
使用Vuex的好处
参考文献:
到此这篇关于Vuex的属性的文章就介绍到这了,更多相关Vuex的属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 详解Vuex的属性
本文链接: https://www.lsjlt.com/news/171953.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0