VueX理解与使用

(1)定义:

Vuex是一个专门为vue.js应用程序开发的状态管理模式

使用场景:(1)登录信息、(2)购物车、(3)复杂的组件通信

(2)使用Vuex的优点

  • 1、多层嵌套的组件、兄弟组件间的状态会更好管理维护。
  • 2、缓存一些当前要使用请求远程或本地的数据集(刷新后会自己销毁)。
  • 3、有了第二条,就可以减少向服务器的请求,节省资源。如果你的用户足够多,那么每多出一个请求,对公司来说,都是一大笔钱。
  • 4、对开发者来说,如果你的项目足够复杂,团队的规模也不仅是一个人,数据集中处理更利于程序的稳定和维护。

(3)核心概念

Vuex的五个核心概念:state、getters、mutations、actions、modules

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

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

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

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

4、action: 和mutation的功能大致相同,不同之处在于

①Action提交的是mutation,而不是直接变更状态

②Action可以包含任意异步操作。

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

实现步骤

* dispatch触发action ->commit触发mutation -> state

例子:

// 调用mutation中的函数

    this.$store.commit('函数名', 数据);

// 调用actions中的函数

    this.$store.dispatch('函数名');    dispatch=>发送,派遣

猜你喜欢

转载自blog.csdn.net/weixin_50543490/article/details/127992940