Vue之Vuex----知识要点

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 发送数据的那个组件
  缺点：不支持响应式

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

安装

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

1.方式

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

<script src="/path/to/vue.js"></script>

2.方式

NPM

npm install vuex --save

或者

Yarn

yarn add vuex

2. 模块化中 .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),
})

2. 在单页面中

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

})
var vm = new Vue({
  store,
  el: "#app"
})
</script>

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'])
}

知识点