• 技术文章 >web前端 >前端问答

    vuex的使用场景和属性有哪些

    青灯夜游青灯夜游2021-09-15 15:10:37原创126

    vuex的使用场景:1、用户的个人信息管理模块;2、电商项目的购物车模块;3、我的订单模块;4、在订单结算页。vuex属性有:1、state,用来存储变量;2、getters;3、mutations;4、actions;5、modules。

    本教程操作环境:windows7系统、vue2.9.6&&vuex4.0.2版,DELL G3电脑。

    vuex是什么?

    vuex是一个用来管理组件之间通信的插件,它是一个专为【vue.js】应用程序开发的状态管理模式,它解决了组件之间同一状态的共享问题,它能够更好地在组件外部管理状态。

    为什么需要vuex?

    当多个组件依赖于同一个状态时,由于多层组件之间的嵌套使得传参数的方法变得更加复杂,另外如果使用父子组件直接饮用或者通过事件来变更和同步状态的多酚拷贝,会使得该模式变得脆弱,从而无法维护代码。

    什么时候什么情况下使用vuex?

    构建一个中大型单页应用,需要考虑到如何更好地在组件外部管理状态。

    注意:如果不是开发大型单页应用,使用vuex可能是繁琐冗余的,也就是本来很快就可以开发完成的项目,用了vuex,结果却复杂了。一般简单的store模式就可以了。

    vuex的五大属性

    state, getters, mutations, actions, modules。

    1. state:vuex的基本数据,用来存储变量

    2. geeter:从基本数据(state)派生的数据,相当于state的计算属性

    3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

    回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。

    4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。

    5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

    vuex使用的场景:

    相关推荐:《vue.js教程

    以上就是vuex的使用场景和属性有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue.js vuex
    上一篇:vue传参数的方法有哪些 下一篇:vuejs项目怎么打包
    线上培训班

    相关文章推荐

    • vuex模块化和命名空间的实例代码• vuex中store的使用介绍(附实例)• Vue.js状态管理模式Vuex的安装与使用(代码示例)• Vue基于vuex和axios实现加载效果以及axios的安装配置• vue中如何监听vuex中的数据变化

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网