文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

详解Vuex的属性

2022-11-13 14:29

关注

Vuex是专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说:VuexVue框架中状态管理

图中绿色虚线包裹起来的部分就是Vue的核心,state中保存的就是公共状态,改变state的唯一方式就是通过mutations进行更改

状态管理模式

把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,组件数构成了一个巨大的视图,不管在树的哪个位置,任何组件都能获取状态或者触发行为,这就是状态管理模式。

应用场景有:单页应用中,组件之间的数据状态

应用实例:

Vuex的属性

Mutations

每个mutations都有一个字符串的事件类型(type)和一个回调函数(handler),这个回调函数就是实际进行状态修改的地方,并且它会接收state作为第一个参数:

const store = new Vuex.Store({
    state:{
        count:1
    },
    mutations:{
        increment(state){
            //变更状态
            state.count++
        }
    }
})

不能直接调用一个mutation handler。这个选项更像是事件注册,当触发一个类型为incrementmutations时,调用此函数。要唤醒一个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
})

Mutation需遵守Vue的响应规则

既然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
})

module

module可以让每个模块拥有自己的statemutationsactiongetters使得结构非常清晰,方便管理

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB
})

使用Vuex的好处

参考文献:

https://v3.vuex.vuejs.org/zh/

到此这篇关于Vuex的属性的文章就介绍到这了,更多相关Vuex的属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯