Vuex详解

Posted 2022-04-17 老张在线敲代码

一、Vuex是什么

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

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

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

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

模板：

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue(
  store,
  render: h => h(App)
).$mount('#app')

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store(
  state: 
  ,
  mutations: 
  ,
  actions: 
  ,
  modules: 
  
)

安装Vuex及基本使用

安装命令

npm install vuex --save

导入vuex

import Vuex form "vuex"
Vue.use(Vuex)

创建Store对象

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

将store对象挂载到vue实例上

Vuex的核心概念

State

state提供唯一的公共数据源，所有公共的数据都要放到store中的state中进行存储

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

组件中访问state的第一种方式

this.$store.state.数据名称

template中不需要this.
$store.state.count

组件中访问state的第二种方式

//从vuex中按需导入mapState函数
import mapState from ”vuex“
//通过mapState函数将当前组件需要的全局数据，映射为当前组件的computed计算属性
computed:
	...mapState(['count'])


直接写count
count

Mutation函数

不可以直接操作元数据（拿到全局的值直接修改全局），只能通过mutation变更数据（拿到全局的值在当前页面修改）
不可以处理异步任务

使用mutation的第一种方式

store中
const store = new Vuex.store(
	//state中存放的就是全局的数据
	state:count:0,
	mutations:
		add(state)
		//变更状态
			state.count++	
		
	
)

组件中
methods:
	handleadd()
	//触发store中mutations的第一种方式
		this.$store.commit('add')	
	

mutation传递参数

store中
const store = new Vuex.store(
	//state中存放的就是全局的数据
	state:count:0,
	mutations:
		add(state,step)
		//变更状态
			state.count+=step
		
	
)

组件中
methods:
	handleadd()
	//触发mutaions函数并携带参数
		this.$store.commit('add',2)	
	

使用mutation的第二种方式

store中
const store = new Vuex.store(
	//state中存放的就是全局的数据
	state:count:0,
	mutations:
		add(state,step)
		//变更状态
			state.count+=step
		
	
)

组件中
button @click="add(5)"
//从vuex中按需导入mapMutations函数
import mapMutations form "vuex"

methods:
	...mapMutations(['add',2])

Action函数

用于处理异步任务，不能直接操作state的数据，只能通过mutation中的commit来操作

action第一种方式

store中
const store = new Vuex.store(
	//state中存放的就是全局的数据
	state:count:0,
	mutations:
	//step形参
		add(state,step)
		//变更状态
			state.count+=step
		
	,
	actions:
		addAsync(context,step)
			setTimeout(()=>
			//携带参数
				content.commit('add',step)
			,1000)	
			
	
)

组件中
mtthods:
	//使用dispatch触发action
	//action触发事件的第一种方式
	handleadd()
		this.$store.dispatch('addAsync',5)
	

action第二种方式

store中
const store = new Vuex.store(
	//state中存放的就是全局的数据
	state:count:0,
	mutations:
	//step形参
		add(state,step)
		//变更状态
			state.count+=step
		
	,
	actions:
		addAsync(context,step)
			setTimeout(()=>
			//携带参数
				content.commit('add',step)
			,1000)	
			
	
)

button @click="add(5)"
组件中
//从vuex中按需导入mapActions函数
import mapActions form "vuex"

methods:
	...mapActions([’add‘])
	//可以直接将add作为按钮的事件

Getter

用于对store中的数据加工处理形成新的数据（不会修改元数据，但是元数据改变getter也会跟着改变）

//定义getter
const store = new Vuex.store(
	//state中存放的就是全局的数据
	state:count:0,
	getters:
		showNum(state)
			return '当前最新的数量是【'+state.count+'】'
		
	
)

组件内第一种
$store.getters.名称
this.$store.getters.名称

第二种
showNum
import mapGetters from 'vuex'
computed:
	...mapGetters(['showNum'])