vue之vuex笔记

1.Vuex概述

1.1.组件之间共享数据的方式

1. 父向子传值：v-bind 属性绑定
2. 子向父传值：v-on 事件绑定
3. 兄弟组件之间共享数据： EventBus
   • $on 接收数据的那个组件
   • $emit 发送数据的那个组件

上面三种只适合小范围的数据共享，如果要频繁的、大范围的进行数据共享就力不从心了

1.2.Vuex 是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

1.3.使用Vuex统一管理状态的好处

1. 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
2. 能够高效地实现组件之间的数据共享，提高开发效率
3. 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

1.4.什么样的数据适合存储到Vuex中

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件 自身的 data 中即可。

2.Vuex的基本使用

2.1.安装 vuex 依赖包

npm install vuex --save

2.2.导入 vuex 包

import Vuex from 'vuex'
Vue.use(Vuex)

2.3.创建 store 对象

const store = new Vuex.Store({
 // state 中存放的就是全局共享的数据
 state: { count: 0 }
})

2.4.在main.js将 store 对象挂载到 vue 实例中

new Vue({
 el: '#app',
 render: h => h(app),
 router,
 // 将创建的共享数据对象，挂载到 Vue 实例中
 // 所有的组件，就可以直接从 store 中获取全局的数据了
 store
})

3.Vuex 的核心概念

3.1.核心概念概述

Vuex 中的主要核心概念如下：

1. State
2. Mutation
3. Action
4. Getter

3.2.State

3.2.1.State定义数据源

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储

// 创建store数据源，提供唯一公共数据
 const store = new Vuex.Store({
 	state: { count: 0 }
 })

3.2.2.组件访问 State 中数据的第一种方式

this.$store.state.全局数据名称

3.2.3.组件访问 State 中数据的第二种方式

// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：

// 2. 将全局数据，映射为当前组件的计算属性
computed: {
 ...mapState(['count'])
}

3.3.Mutation

3.3.1.Mutation的作用

Mutation用于变更Store中的数据。

1. 只能通过mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
2. 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

3.3.2.触发mutations的方式一

1. 不携带参数

   

   commit就是调用某个mutations 函数，this.$store.commit() 是触发 mutations 的第一种方式

2. 触发 mutations 时传递参数

   

3.3.3.触发 mutations 的方式二

通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：

3.4.Action

Action 用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

3.4.1.触发Action的第一种方式

3.4.2.触发 actions 异步任务时携带参数

3.4.3.触发 actions 的第二种方式

this.$store.dispatch() 是触发 actions 的第一种方式，触发 actions 的第二种方式：

通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：

3.5.Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据。

1. Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。

2. Store 中数据发生变化，Getter 的数据也会跟着变化。

   

3.5.1.使用 getters 的第一种方式：

this.$store.getters.名称

3.5.2.使用 getters 的第二种方式：

import { mapGetters } from 'vuex'
computed: {
 ...mapGetters(['showNum'])
}

4.基于Vuex的案例Todos

4.1.功能示例

4.2.初始化项目

1. 通过 vue ui 命令打开可视化面板，创建新项目 vuex-demo2

   

2. 安装 vuex 依赖包 npm install vuex axios ant-design-vue –S

3. 实现 Todos 基本布局（基于已有样式模板）

4.3. 完成具体功能

4.3.1.引入store

1. 定义store

   

2. 引入

   

3. 内容讲解：https://gitee.com/stonebridge2020/vuex_demo1.git

4. 示例：https://gitee.com/stonebridge2020/vuex_demo2.git