笔记-Vuex初识其面

vue全局状态管理器vuex

摘要：vue的两大核心，一为数据驱动，一为组件系统，组件是vue代码复用的优良载体，而组件通讯是vue里非常重要的部分。父子兄弟通讯远远不能满足业务需求，vuex就为此而生

何为vuex

如题，vuex是vue的全局状态管理器（工具，系统），用于vue中组件间复杂的通讯
vuex有五大核心

• state 全局状态对象

所有全局状态在此配置，在组件中利用组件实例的$store.state读取对应状态量

• getters 状态衍生量对象

基于全局状态衍生参量，受到所依赖的状态参量影响，组件中通过$store.getters读取

• mutations 全局状态管理方法对象

vuex全局状态编辑内部唯一指定方法集合，相当于state中数据的setter，组件中通过$store.commit(‘name’,argllist)调用

• actions 异步操作方法对象

ajax等异步操作应在此配置，通过方法的内置参数context.commit调用到管理方法,组件中通过$store.dispatch(‘name’,argllist)调用

• modules 状态模块

允许分块配置不同情况全局状态的集合，方便写作开发，减少协作者代码互相污染

辅助函数

在组件中使用$store对象获取和调用全局管理工具，并不是十分优雅从容，当需要调用的状态和方法很多时，这样会导致代码很多，这就令人难受了，对此，vuex提供了一些钩子函数，也就是辅助函数这种减少部分代码的等效替代操作

1. states mapStates

在组件中script中引入，在computed内调用

import { mapStates } from ‘vuex’
…mapStates(stateNameList)
{{ stateName }} this.stateName

3. getters mapGetters

在组件中script中引入，在computed内调用

import { mapGetters} from ‘vuex’
…mapGetters(getterNameList)
{{ getterName }} this.getterName

4. mutations mapMutations

在组件中script中引入，在methods内调用

import { mapMutations} from ‘vuex’
…mapMutations(mutationName List)
{{ mutationName }} this.mutationName

5. actions mapActions

在组件中script中引入，在methods内调用

import { mapActions} from ‘vuex’
…mapActions(actionNameList)
{{ actionName }} this.actionName

安装与使用

安装

vuex部署

npm install vuex --save

配套的 持久化数据插件

npm install vuex-persistedstate --save

在vue的webpack中配置

src目录下
创建store目录，
store中
创建index.js，其中内容

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
//vuex持久化数据
//cnpm i vuex-persistedstate -S
Vue.use(Vuex)
export default new Vuex.Store({
	state:{//data
		testthis:666,
	},
	mutations:{//methods
		amethod(state,arg1,...,argn){
		
		},
	},
	getters:{//computed
		agetter(state){}
	},
	actions:{//异步方法集合,配合axios，
		afn(context){
			//actions里的异步方法都有这个对象参数，里面有commit等方法
		}
	},
	//注册持久力
	plugins:[createPersistedState()],
	modules,
})

在main.js中配置

//...
import store from './store'
//...
new Vue({
	//...,
	store,
	//...,
})

在组件中获取对应状态/方法

this.$store.state.testthis

访问和获取状态state数据

this.$store.commit('方法名',arg1,...,argn)

调用并为mutations里方法传参

this.$store.getters.agetter

获取getters中计算属性

this.$store.dispatch('异步方法名',参数)

调用actions中异步方法
配置
说明
vuex状态（数据）管理器 单向数据流 数据驱动 组件（component）系统
解决非父子组件间的数据共享
子组件不能直接操作数据
创建仓库
store --渲染组件
mutations --操作仓库
actions --受组件操作，可以操作mutations

单向数据流：component -(dispatch)-> actions -(commit)-> mutations -(mutate)-> store -(render)-> component

五核心
state 状态数据集合 相当于vue的data
getters 状态数据衍生属性集合 相当于vue中的computed
mutations 状态修改方法集合 相当于vue用computed为data设置的setter
actions 异步操作回调修改状态方法集合
modules 模块 单元化数据及其处理
vuex模块
modules

定义
store/index.js

let moda={
	state:{
		gouzia:'狗子A',
	},
	getters:{
		zhuzia:'主子A',
	},
	mutations:{
		muta(){},
	},
	actions:{
		acta(){}
	},
	namespaced:false,//局部命名空间，默认关闭
},
modb={
	state:{
		gouzib:'狗子B',
	},
	getters:{},
	mutations:{},
	actions:{},
	namespaced:false,
}

new Vuex.Store({
	modules:{
		a:moda,
		b:modb,
	}
})

使用
普通

this.$store.state.a.gouzia
this.$store.getters['a/zhuzia']
this.$store.commit('a/muta')
this.$store.dispatch('a/acta')

利用辅助函数

...mapState('a',['gouzia']) //其他同理

辅助函数
vuex辅助函数

组件中

div:

{{ asta1 }}
{{ aaa }}

script:

import {mapState,mapGetters} from 'vuex'
//实例化内
computed:{
	...mapGetters(['aget1','aget2']),
	...mapState(['asta1','asta2',...]),
	/*或
	...mapState({aaa:'asta1',bbb:'asta2'}),
	*/
}
	/*或
	computed:mapState({
		asta1:'',
		asta2:'',
	})
*/

methods:{
	...mapActions(),
	...mapMutations(),
}

To be continued…