先简单介绍下VueX是什么,官网:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
一句话来说就是,声明一个全局属性,我在项目的任何地方都能访问到,都能修改,并且在修改之后同时能影响到其他的组件。
画个图更好理解:————>>>
ok,基础的vue-cli配置和vuex引入就跳过了,直接来看store里面都是些什么:
export default new Vuex.Store({
state: { //放置的初始状态,app启动时全局属性值
count: 0 //声明 输出状态的属性值对
},
mutations: { //通过提交mutations的方式管理state(管理state的方法)
//mutations都是同步事务
increment(state, msg) { //state:为store对象,msg提交时传递的数据
state.count += msg //内部写处理方法
}
},
actions: { //类似于mutations,但是它提交的是mutations,可以包含异步操作
login({commit}, {user, pass}) {
//解构参数,第一个参数是与store实例具有相同方法和属性的context对象,不是实例本身,通过解构参数提取实参的commit属性
commit('increment') //直接调用触发commit方法,适用于经常调用
}
//通过store.dispatch ( 'login' ) 触发actions
//actions流程:组件dispatch()派发任务 ----> actions处理,调用commit提交mutaions的方法 ---> mutaions触发,管理state ---> state改变
},
modules: {
a: moduleA,
b: moduleB
//将整个store分割成一个一个模块,每个模块都拥有自己的 state、mutation、action、getter、嵌套子模块
})
常用方法:
1.组件内提交 this.$store.commit(“mutationsFN”,message)
2.导入Vuex的mapMutations函数,在组件methods内使用对象扩展运算符注册
methods:{
...mapMutations([
"increment"
])
}
// 将 this.increment()
映射为this.$store.commit('increment')
//在组件内可直接通过this.increment ( msg )调用
3.this.$store.dispatch(“actionFN” , {user,pass})
//同样支持荷载模式和对象模式分发
…mapActions(["login])
//组件内调用 this.login()
//返回promise对象,可调用成功回调resolve和reject
this.login(user).then(res=>{
console.log("res-->","成功回调")
}).catch(err=>{
console.log(err,'--err--',"失败回调")
})
},