一、Vuex安装
一般在创建项目是会选择 Vuex,如果没有选择:
cnpm install vuex --save
使用:
import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({//开启命名空间 modules: { app, errorLog, permission, tagsView, user } });
二、Vuex 构成
2.1 state
说明:储存初始化数据
使用:
this.$store.state.xxxxx
2.2 getters
说明:对state中的成员加工后传递给外界
getters中的方法有两个默认参数
state 当前VueX对象中的状态对象
getters 当前getters对象,用于将getters下的其他getter拿来用
例:
getters:{ nameInfo(state){ return "姓名:"+state.name }, fullInfo(state,getters){ return getters.nameInfo+'年龄:'+state.age }
}
使用:
this.$store.getters[namespace/getterName]
2.3 mutations
说明:mutations是操作state数据的方法的集合,比如对该数据的修改、增加、删除等等
mutations方法都有默认的形参:
([state] [,payload])
- state是当前VueX对象中的state
- payload是该方法在被调用时传递参数使用的
使用:
this.$store.commit('mutationName,’payload')
2.4 aciton
说明:由于直接在mutation方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交mutation方法。
Actions中的方法有两个默认参数
- context 上下文(相当于箭头函数中的this)对象
- payload 挂载参数
action的功能和mutation是类似的,都是去变更store里的state,不过action和mutation有两点不同:
1、action主要处理的是异步的操作,mutation必须同步执行,而action就不受这样的限制,也就是说action中我们既可以处理同步(视图触发Action,Action再触发Mutation),也可以处理异步的操作
2、action改变状态,最后是通过提交mutation
3、角色定位基于流程顺序,二者扮演不同的角色。
Mutation:专注于修改State,理论上是修改State的唯一途径。
Action:业务代码、异步请求。
使用:
this.$store.dispatch[namespace/actionName]
2.5 module
最后在对外提供出口的时候,namespaced:true,开启模块化
export default { namespaced: true, state, getters, mutations, actions };