欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vuex细说

程序员文章站 2022-10-04 10:49:30
vuex 1,什么是 vuex? vuex 是一个专门为 vue.js 应用程序 开发的状态管理模式+库 它充当应用程序中所有组件的集中存储(数据状态) ,其规则确保状态只能以可预测的方式进行变更 并且 组件状态 和 后台数据 都是响应的 2,vuex使用方法? - 下载:$ npm i vuex ......

vuex

1,什么是 vuex?

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

  它充当应用程序中所有组件的集中存储(数据状态) ,其规则确保状态只能以可预测的方式进行变更

  并且 组件状态 和 后台数据 都是响应的

2,vuex使用方法?

  - 下载:$ npm i vuex -s

  - 在 store.js

   + 向 vue 中 写入 vuex

    Vuex细说

  - 向 vm 实例 注入 store

    Vuex细说

3,vuex 默认的五种基本对象?

  · state    数据仓库 存放数据的地方(基本数据)

  · mutation   是所有直接处理 state 的事件方法 提交更改数据的方法(同步)

  · getter     从基本数据派生的数据

  · action     和 mutations 一样 都是存放事件的方法,像一个装饰器,包裹 mutations (异步)

  · module    模块化 vuex

4,mutation 细说?

  Vuex细说

  参数1:是 state

  参数2:payload

  所有直接修改 state 状态的行为都是通过 mutations

  Vuex细说

  组件中的事件 通过 this.$store.commit(‘mutations中的事件名’)

  # 提交载荷 (payload)

  Vuex细说

  在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读:

  Vuex细说

   # 对象风格的提交方式

  Vuex细说

  当使用对象风格的提交方式,整个对象都作为载荷传给 mutation 函数,因此 handler 保持不变:

  Vuex细说

5,action 细说?

  首先来注册一个简单的 actions

  Vuex细说

  组件通过 this.$store.dispath(‘actions中的事件名’)

  # 分发 action

  Vuex细说

  # 我们 在 action 内部执行异步操作

  Vuex细说

  # actions 支持同样的载荷方式和对象方式进行分发:

  Vuex细说

 6,action 和 mutation 区别?

  Vuex细说