vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
专门在vue中实现集中式的状态数据管理工具,对多组件*享状态数据进行集中式的管理,
也是一种组件间的通讯方式,切适用于任意组件
什么情况下我应该使用 Vuex?
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
vuex的核心
- State
- Mutation
- getter
- action
- module
State:
例子:
state:{
key: value
}
state是vuex的单一状态树,就是用来储存数据的地方,本质就是一个对象
我们可以通过 store.state.key 来读取state中的数据,也可以使用 mapState 辅助函数
使用方式 在computed中
...mapState({key:'value'})或...mapState(['value'])
key:组件中调用的值名,value是state中的状态(数据)名
getter:
例子:
getters:{
addOne: (state)=>{
return state.数据名 +1;
}
}
getter相当于vue中的计算属性,传入一个state对state中的数据进行加工,然后返回一个可以使用的数据
我们可以通过 store.getters.addOne 来读取getter中的数据,也可以使用 mapGetters 辅助函数
使用方式 在computed中
...mapGetters ({addOne :'addOne'})或...mapGetters (['addOne'])
addOne:getters中的数据名
Mutation:
例子:
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
payload:载荷在大多数情况下,载荷应该是一个对象
mutation 必须是同步函数。
使用方式 在methods中
创建一个方法,通过store.commit('increment , 对象)来调用它,用于修改state中的数据
...mapMutations({increment :'increment '})或...mapMutations(['increment '])
但是通过mapMutations函数调用没有办发传递参数,只能在绑定事件中调用@click = increment(参数)
action:
例子:
actions: {
increment (context) {
context.commit('increment')
}
}
Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
通过 `context.state` 和 `context.getters` 来获取 state 和 getters
Action 通过 `store.dispatch` 方法触发
Action中是可以进行异步操作的
使用方式 在methods中
创建一个方法,通过 store.dispatch('increment')来触发它
...mapActions({increment :'increment '})或...mapActions(['increment '])
module:
作用:用来分割store,当store过大时造成结构臃肿,就使用mutations来将store拆分
每一个mutations中都有state,getters,mutations,actions
这个时候我们在组件中调用模块中的state,getters,mutations,actions的时候就要store.模块名才能找到
通过添加 `namespaced: true` 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。