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提供了一些钩子函数,也就是辅助函数这种减少部分代码的等效替代操作
- states mapStates
在组件中script中引入,在computed内调用
import { mapStates } from ‘vuex’
…mapStates(stateNameList)
{{ stateName }} this.stateName
- getters mapGetters
在组件中script中引入,在computed内调用
import { mapGetters} from ‘vuex’
…mapGetters(getterNameList)
{{ getterName }} this.getterName
- mutations mapMutations
在组件中script中引入,在methods内调用
import { mapMutations} from ‘vuex’
…mapMutations(mutationName List)
{{ mutationName }} this.mutationName
- 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(),
}