Vue之Vuex----知识要点

红太狼 2023-07-21 11:28 22阅读 0赞

# Vuex简述 #

## 官方这么讲的：https://vuex.vuejs.org/zh/ ##

### 官话 啥是Vuex ###

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

### 白话 ###

将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，

## 组件之间共享数据的方式 ##

1.  父向子传值：**v-bind** 属性绑定
2.  子向父传值： **v-on** 事件绑定
3.  兄弟组件之间共享数据： **EventBus**

*  $on : 接受数据的那个组件
 *  $emit 发送数据的那个组件  
    缺点：不支持响应式

1.  Vuex 组件数据共享  
    缺点：数据的读取和修改需要按照流程来操作，对于小型项目来说比较繁琐

## 安装 ##

### 官方 https://vuex.vuejs.org/zh/installation.html ###

### 1.方式 ###

1.  下载vuex https://unpkg.com/vuex@3.1.3/dist/vuex.js (复制粘贴)
2.  导入Vuex

### 2.方式 ###

**NPM**

> npm install vuex --save

或者

**Yarn**

> yarn add vuex

1.  模块化中 .vue后缀 引入

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

### 完成以上其中一项之后之后：开始正式使用 ###

#### 1. 创建 Store对象 ####

state 中存放的就是全局共享的数据

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

#### 2.将store对象挂载到vue实例中 ####

1.  在模块中

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

1.  在单页面中

# Vue核心概念 #

## 1 State ##

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

创建：

const store=new Vuex.Store({ 
    	state:{ conut:0}
    	})

组件中访问State中的数据的第一种数据：

*  在组件中不需要写this,

<template>
    	<div>
    		<h3>当前的count的值为{ { $store.state.conut}}</h3>
    	</div>
    </template>
    <script>
    export defaulf{ 
    	data(){ 
    		return { }
    	}
    }
    </script>

组件中访问State中的数据的第二种数据：

*  1从vuex中导入mapState

import {  mapState } from ‘vuex’

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

*  将全局数据，映射为当前组件的计算属性
 *  … 是展开运算符号

computed:{ 
    	...mapState(['count'])
    }

例如：

<template>
    	<div>
    		<h3>当前的count的值为{ { conut}}</h3>
    	</div>
    </template>
    <script>
    import {  mapState } from ‘vuex’
    export defaulf{ 
    	data(){ 
    		return { }
    	},
    	computed:{ 
    	...mapState(['count'])
    }
    }
    </script>

## 2 Mutation ##

\*\* Mutation用于变更Store中发数据 （同步）\*\*

*  vuex不推荐直接通过组件操作store中的数据
 *  这种方式有利于监控数据中的变化，方便后期 的维护‘
 *  mutations带s
 *  commit 就是调用Mutation的某个函数
 *  第一个参数永远是state
 *  第一个参数是方法名 第二个是参数  
    **定义Mutation**

const store=new Vuex.Store({ 
    	state:{ conut:0}
    	}),
    	mutations:{ 
    	//第一个参数永远是state
    	add(state){ 
    			//变更状态
    			state.count++
    		}
    	}

**使用Mutations函数**  
触发Mutation  
1.

mutations:{ 
    	
    	hander(){ 
    			//触发的第一种方式
    			//commit 就是调用Mutation的某个函数
    			this.$store.commit('add')  //第一个参数是方法名 第二个是参数
    		}
    	}

*  1从vuex中导入mapMutations

import {  mapMutations} from ‘vuex’

在组件中使用

computed:{ 
    	...mapMutations(['sub','add'])
    }
    //在组件的 methods中使用
    //可以直接通过@click 直接使用hander
    methods:{ 
    	hander(){ 
    		this.add()	
    	}
    }

## 3 Action ##

**异步任务**

*  第一个参数永远是context 第二个参数是穿过来的参数
 *  用dispatch调用

定义

const store=new Vuex.Store({ 
    	state:{ conut:0}
    	}),
    	mutations:{ 
    		addx(state,ste){ 
    			state.count+=ste
    		}
    	},
    	actions:{ 
    	//第一个参数永远是context 第二个参数是穿过来的参数
    	addN(context,ste){ 
    			setTimeout(()=>{ 
    
    				context.commit("addx","ste")
    			}，1000)
    		}
    }

触发：第一种  
在组件中使用

methods:{ 
    	hander(){ 
    		this.$store.dispatch（“addN”，“5”）
    	}
    }

触发第二种

*  1从vuex中导入mapActions

import {  mapActions} from ‘vuex’

在组件中使用

computed:{ 
    	...mapActions(['sub','add'])
    }
    //在组件的 methods中使用
    //可以直接通过@click 直接使用hander
    methods:{ 
    	hander(){ 
    		this.add()	
    	}
    }

# 4 Getter #

**不会修改源数据。用于对store中的数据进行加工处理形成新的数据**

*  类似于vue中的计算属性
 *  store中的数据发生变化，getter的数据也会跟着变化
 *  不会修改源数据 只是包装

定义：

const store=new Vuex.Store({ 
    	state:{ conut:0}
    	}),
    	getters:{ 
    		showN:state=>{ 
    		return 'state.count'
    }
    	}
    
    }

使用 第一种

在组件中可以省this

this.$store.getters.名称

第二种 mapGetters

import {  mapGetters} from ‘vuex’

在组件中使用 计算属性值中使用 computed

computed:{ 
    	...mapGetters(['sub','add'])
    }