一、Vuex (全局变量管理~~多个页面共享数据)
✿ 更详细的可以看官网:开始 | Vuex
1、什么是Vuex?
2、核心概念:
(1) state:保存共享的状态(全局变量)
(2) getters(类似计算属性)
(3) mutations:(类似于事件注册) Vuex的store状态的更新唯一方式:提交Mutation
1)Mutation主要包括两部分:
2)使用:
3)提交载荷(Payload):就是mutations回调函数的参数(可以是基本变量,也可以是对象):
4)提交风格:
5)使用常量替代 Mutation 事件类型:
6)在组件中提交 Mutation(简化方法的调用代码):使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
(4) actions(异步操作):actions提交的对象是 mutation,而不是直接变更状态state:
1)Action 函数有一个与 store 实例具有相同方法和属性的 context 对象,
2) Action作用:
3) 使用:
4)提交载荷(Payload)---actions和mutations的回调函数的参数:
5)Action返回Promise对象,将异步操作后的结果返回给vue实例method中定义分发的函数。
6)在组件中分发 Action(简化方法的调用代码): mapActions 辅助函数将组件的 methods 映射为 store.dispatch
(5) modules(模块化):
一、Vuex (全局变量管理~~多个页面共享数据)
![](https://i-blog.csdnimg.cn/blog_migrate/08307eb03a64a1bd33d76229d68a6e8f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/827975dc5a322d999558efe6b5145c2e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2db37a95ca45dfa49364841bb98f044e.png)
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
//提交mutations
this.$store.commit('increment', 10)
![](https://i-blog.csdnimg.cn/blog_migrate/038a19ba67fb4dbe228042f256cb6b43.png)
vue 实例中定义的method方法中:通过 this.$store.commit('increment'),
其中这个 'increment' 就是咱定义在store的mutitions中的回调函数名
![](https://i-blog.csdnimg.cn/blog_migrate/7a1d61051e47303bd510bd00d8d16367.png)
//注册increment事件
mutations: {
increment (state, n) {
state.count += n
}
}
//提交mutations
this.$store.commit('increment', 10)
![](https://i-blog.csdnimg.cn/blog_migrate/5590269df9ba0945a660443403b389ab.png)
//注册increment事件
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
//提交mutations
this.$store.commit('increment', {
amount: 10
})
![](https://i-blog.csdnimg.cn/blog_migrate/1f4e0715424e5a1601d7bea971b45443.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d5741809877925fe8ebc29316e47b53f.png)
//注册一个increment的action,并通过context提交个mutations
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
//写法一:直接书写context对象
increment (context) {
context.commit('increment')
}
//写法二:直接书写context对象需要用到的属性或方法
increment ({commit}) {
commit('increment')
}
}
})
![](https://i-blog.csdnimg.cn/blog_migrate/2dda3f34f8761523e11afb974c8993bf.png)
this.$store.dispatch('increment');
![](https://i-blog.csdnimg.cn/blog_migrate/81edf0597432d855dc60ba73cb315160.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c48b629c864c48e466d933b07d46602c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b536be464c2a2ad31f6f81ec75314edb.png)