vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(可以理解为对数据进行统一的管理)
vuex的核心属性
一共五个核心属性: state, mutations, getters, actions, modules
vuex的结构
const store = new Vuex.Store({
state:{
// 通过管理状态(数据)
},
mutations:{
// 进行同步操作;修改state的唯一入口
},
getters:{
// Vuex的计算属性,对state的状态派生出新的状态
},
actions:{
// 进行异步操作
},
modules:{
// Vuex的模块 : 每个模块都有五个属性 state, mutations, getters, actions, modules
}
})
vuex 的实例对象
vuex 的实例对象 store , 可以通过store访问 vuex中的state , 提交mutations 等
const store = new Vuex.Store({...})
// 注册到Vue实例中
const app = new Vue({
...,
store
})
vuex 的state
访问state中的状态:
- 在模板中:
$store.state.key
- 在组件中:
this.$store.state.key
- 通过 辅助函数 mapState() 访问 : 可以使用 mapState 辅助函数帮助我们生成计算属性
// 对象形式传递
computed: Vuex.mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
// 数组形式传递
computed:{
// 当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
...Vuex.mapState(['count'])
}
vuex 的mutations
mutation的基本用法
如果要修改state中的状态, mutation 是唯一的入口; 需要提交mutations 修改state ; 通过 store.commit()
提交mutation
- vuex中定义 mutation
const store = new Vuex.Store({
state:{},
mutations:{
自定义的mutation的名字(){
}
}
})
- 在vue实例中触发事件,提交mutation
methods:{
add(){
this.$store.commit('自定义的提交的mutation名字')
}
}
提交载荷 payload
提交载荷 就是传递参数; 建议参数使用对象的形式进行传递; 为了便于维护和扩展;载荷作为commit()的第二个参数存在
methods:{
add(){
this.$store.commit('自定义的提交的mutation名字', payload)
}
}
以对象的形式提交mutation
需要在对象中定义一个type属性,用来指定mutation ; 整个对象作为载荷被一起提交
- 定义mutation
const store = new Vuex.Store({
state:{},
mutations:{
// mutation 默认接受的第一个参数是state(就是vuex的state), 第二个参数就是提交的载荷(传递的数据)
自定义的mutation的名字(state, val){
}
}
})
- 提交mutation
methods:{
add(){
this.$store.commit({
type:'自定义的mutation名字',
... // 传递的数据(载荷payload)
})
}
}
mapMutations 辅助函数
你可以在组件中使用 this.$store.commit('xxx')
提交 mutation,或者使用 mapMutations()
辅助函数将组件中的 methods 映射为 store.commit
调用(需要在根节点注入 store)
...Vuex.mapMutations(['定义的mutation名字1', ...])
methods:{
// 如果是数组形式: 则把mutation的名字自动映射出同名的方法名
...Vuex.mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
// 如果是对象形式: 重新定义方法名和 mutation 的映射机制
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
// 辅助函数 提交载荷 :通过一个新的方法 调用 映射出来的方法并且传入参数
newMethods(){
// 参数 payload 自动映射为 this.$store.commit('incrementBy', amount)
this.incrementBy(payload)
}
}
vuex 的getters
getters 相当于vuex的计算属性,用来针对state中的状态派生出新的状态(通过getters对象state中的数据进行处理得到新的数据)
访问getters
- 通过属性访问:
Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:- 模板中:
$store.getters.key
- 组件中:
this.$store.getters.key
- 模板中:
- 通过方法访问:
你也可以通过让 getter 返回一个函数(通过闭包的形式),来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
getters:{
自定义getters名字(){
return function(params){
// 业务逻辑处理
// 处理完成后 把结果放回
return result
}
}
}
getters的参数
getters:{
// getters默认接受第一个参数是state , 第二个参数是其他的getters (它是一个对象, 通过getters.key访问其他的getters)
自定义getters名字1(state, getters){
// 业务逻辑处理
return result
},
自定义getters名字2(state, getters){
// 业务逻辑处理
return result
}
}
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性(vue实例对象的计算属性):
computed:{
// 数组形式: 自动映射getters同名的计算属性 (在计算属性名字没有被占用的情况下可以使用)
...Vuex.mapGetters(['getters名字1', ...]),
// 对象形式: 重命名计算属性名 和getters名字的映射机制
...Vuex.mapGetters({
// 把 `this.newComputedName` 映射为 `this.$store.getters.getters名字1`
newComputedName:'getters名字1'
})
}