vue状态管理器基础使用（Vuex）

妖狐艹你老母 2023-01-20 13:59 247阅读 0赞

#### 1. Vuex 概述 ####

> ##### 1.1 组件之间共享数据的方式 #####
> 
> 父向子传值：`v-bind 属性绑定`  
> 子向父传值：`v-on 事件绑定`  
> 兄弟之间共享数据：`EventBus`
> 
>  *  $on 接收数据的那个组件
>  *  $emit 发送数据的那个组件
> 
> ##### 1.2 Vuex #####
> 
> `Vuex` 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享
> 
> ##### 1.3 使用 Vuex 统一管理状态的好处 #####
> 
> 1.  能够在Vuex 中集中管理共享的数据，易于后期开发和维护
> 2.  能够高效的实现组件之间的数据共享，提高开发效率
> 3.  存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步
> 
> ##### 1.4 适合存储的数据 #####
> 
> 一般情况下，只有组件之间共享的数据，才有必要存储到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 将 store 对象挂在到 vue 实例中 #####
> 
>     new Vue({
>     	el: '#app',
>     	render: h => h(app),
>     	router,
>     	// 将创建的共享数据对象，挂在到 Vue 全局实例中
>     	// 所有的组件，就可以直接从 store 中获取全局的数据了
>     	store,
>     })

#### 3. Vuex 的核心概念 ####

> ##### 3.1 核心概念概述 #####
> 
> Vuex 中的主要核心概念如下：
> 
>  *  State
>  *  Mutation
>  *  Action
>  *  Getter
> 
> ##### 3.2 State #####
> 
> State 提供唯一的公共数据源，所有共享的数据都要通义放到 Store 的 State 中进行存储
> 
>     // 创建store数据源，提供唯一公共数据
>     const store = new Vuex.Store({
>     	state: {
>     		count: 0
>     	}
>     })
> 
> 组件访问State中数据的两种方式：
> 
>  *  `this.$store.state.全局数据名称`
>  *  
> 
> 1.  从 vuex 中按需导入 mapState 函数  
>     `import { mapState } from ‘vuex’`
> 2.  将全局数据，映射为当前组件的计算属性  
>     `computed: { ...mapState(['count']) }`
> 
> ##### 3.3 Mutation #####
> 
> Mutation 用于变更 Store 中的数据  
> 1、 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据  
> 2、通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化  
> **mutations 触发方式一**
> 
>     // 定义 Mutation
>     const store = new Vuex.Store({
>     	state: {
>     		count: 0
>     	},
>     	mutation: {
>     		add(state) {
>     			// 变更状态
>     			state.count++
>     		}
>     	}
>     })
>     // 触发 mutation
>     methods: {
>     	fun() {
>     		this.$store.commit('add')
>     	}
>     }
> 
> 可以在触发 mutation 时传递参数
> 
>     // 定义 Mutation
>     const store = new Vuex.Store({
>     	state: {
>     		count: 0
>     	},
>     	mutation: {
>     		add(state, step) {
>     			// 变更状态
>     			state.count += step
>     		}
>     	}
>     })
>     // 触发 mutation
>     methods: {
>     	fun() {
>     		// 在调用 commit 函数
>     		// 触发 mutations 时携带参数
>     		this.$store.commit('add', 3)
>     	}
>     }
> 
> **mutations 触发方式二**
> 
>     // 1. 从 vuex 中按需导入 mapMutation 函数
>     import { mapMutations } form 'vuex'
>     // 2. 通过导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法
>     methods: {
>     	...mapMutations(['add', 'addN'])
>     }
> 
> **`[!!!]不要在 mutations 中执行异步操作`**
> 
> ##### 3.4 Action #####
> 
> Action 用于处理异步任务  
> 如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据  
> **action 触发方式一**
> 
>     // 定义 Action
>     actions: {
>     	funAsync(context) {
>     		setTimeout(() => {
>     			//在Action中，不能直接需改 state 中的数据，需通过 context.commit() 触发 mutation 才行
>     			context.commit('add')
>     		},1000)
>     	}
>     }
>     
>     // 触发 Action
>     methods: {
>     	fun() {
>     		// 使用 dispatch 触发 action
>     		this.$store.dispatch('funAsync')
>     	}
>     }
> 
> 可以在触发 action时传递参数
> 
>     // 定义 Action
>     actions: {
>     	funAsync(context, step) {
>     		setTimeout(() => {
>     			context.commit('add', step)
>     		},1000)
>     	}
>     }
>     
>     // 触发 Action
>     methods: {
>     	fun() {
>     		// 使用 dispatch 触发 action
>     		this.$store.dispatch('funAsync', 5)
>     	}
>     }
> 
> **action 触发方式二**
> 
>     // 1. vuex 中按需导入 mapActions 函数
>     import { mapActions } from 'vuex'
>     // 2. 通过指定的 action 函数，映射为当前组件的 methods 函数
>     methods: {
>     	...mapActions(['sub', 'subN'])
>     }
> 
> // 定义 Getter
> 
> ##### 3.5 Getter #####
> 
> Getter 用于对 Store 中的数据进行加工处理形成新的数据  
> 1、Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性  
> 2、Store 中数据发生变化，Getter 的数据也会跟着变化
> 
>     // 定义 Getter
>     const store = new Vuex.Store({
>     	state: {
>     		count: 0
>     	},
>     	getters: {
>     		showNum: state => {
>     			return '最新【' + state.count + '】'
>     		}
>     	}
>     )}
> 
> 组件访问State中数据的两种方式：
> 
>  *  `this.$store.getters.名称`
>  *  
> 
> 1.  从 vuex 中按需导入 mapState 函数  
>     `import { mapState } from ‘vuex’`
> 2.  将全局数据，映射为当前组件的计算属性  
>     `computed: { ...mapState(['count']) }`