vuex深入浅出
本文主要记录使用vuex的使用场景、重要组成部分和学习心得。
1、说在前面
学习vue有两周的时间了,目前已经对vue的基础使用比较熟悉了。但是一直对vuex的使用耿耿于怀,这么说是因为总是不太理解,还好经过实践和深入阅读官网后现在总算有了一定的掌握,这里做一下学习笔记和使用心得。
2、什么是vuex
vuex是vue的状态管理模式,它集中管理所有组件的共享状态,并且有自己的规则,比如怎么修改状态的值,怎么获取状态的值,是以一种可预测的方式来监听状态的改变。
3、为什么要使用vuex
我们知道,组件的通信(单向数据流)有两种:
- 1、父->子通信,通过
props
- 2、子->父通信,通过触发
$emit
的方法
那么,兄弟组件的通信呢?(当然简单的也可以通过子->父->子的方法传递,但是还是比较麻烦的),那么不相关的组件之间的通信呢?这就是vuex存在的主要意义。用官网上的话就是解决: - 1、多个视图依赖同一个状态
- 2、来自不同视图的行为变更同一个状态
4、vuex的组成
State
在state
中定义共享的状态值
//state.js
export default state = {
count: 0
}
获取state的值,需要放在计算属性中,保证每次state能够响应式的获取
computed:{
count(){
return this.$stores.state.count //获取值
}
}
这种获取方式是比较繁琐的,因此vuex给我们提供的对应的语法糖 mapState
,便于我们简洁性的获取值
import { mapState } from 'vuex'
export default{
computed:{
...mapState(['count']) //这样我们在组件就可以通过this.count获取对应的值了
}
}
Getter
state的派生状态值,可以理解成是store的计算属性,它一般是一个方法,方法接受一个参数state
//getter.js
export default {
getCount: state => state.count + 1
}
它的辅助函数是mapGetter
,一般也放在computed里
import { mapGetters } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters(['getCount'])
}
}
Mutation
vuex规定更改state的值唯一方法是提交 mutation,原因是为了能够明确的追踪状态的变化,它接受2个参数(state,newVal),第二个参数可以是字符串也可以是对象
//mutations.js
export default {
setCount(state,newVal){
state.count = newVal
}
}
必须通过commit
的方法触发调用它
this.$store.commit('setCount',20) //此时你把state中的count的值变成了20
它的辅助函数是mapMutations
,它一般放在methods中
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['setCount'])
}
}
在 Vuex 中,mutation 都是同步事务,不可写入异步操作
Action
Action 类似于 mutation,它主要用于:
- 批量的同步操作
- 异步操作
它接受一个store 实例具有相同方法和属性的context
对象,注意它提交的是 mutation,而不是直接变更状态
//actions.js
export default {
increment(context){
context.commit('setCount')
}
}
在实践中可以通过参数解构的方法简化代码
increment({commit}){
commit('setCount')
}
在组件中通过分发dispatch
的方法来触发action
this.$store.dispatch('increment')
这样做的目的是为了可以在action的内部执行异步操作(比如通过接口请求后才更改state的值)
increment({commit}){
setTimeout(()=>{
commit('setCount')
},1000)
}
也可以同步批量更改state中的值
increment({commit}){
commit('mutation1')
commit('mutation2')
commit('mutation3')
}
它的辅助函数是mapActions
,一般放在methods中
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['increment']) //将 this.increment() 映射为 this.$store.dispatch('increment')
}
}
action的返回接收,可以返回一个Promise
export default{
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
数据接受后处理
this.$store.dispatch('actionA').then(() => {
// ...
})
5、vuex的定义
我们一般会在src目录下建立一个名为store的文件夹专门放vuex的文件,目录里存放
state.js
:所有需要管理的状态getters.js
:所有需要更派生的状态mutations.js
:所有需要更改状态的方法actions.js
: 所有需要异步或批量同步更改状态的方法index.js
: 主入口文件
代码
import Vue from 'vue'
import VueX from 'vuex'
import States from './state'
import Getters from './getters'
import Mutations from './mutations'
import Actions from './actions'
Vue.use(Vuex)
export default nex Vuex.Store({
State,
Getters,
Mutations,
Actions
})
然后在根目录下的main.js
中全局引入
import store from './store'
new Vue({
el: '#app',
router,
store, //在这里
template: '<App/>',
components: {
App
}
})
6、总结
总的来说,当把所有的应用梳理一遍后vuex也没有那么的高深莫测,一切源于实践吧!实践比直接阅读或看文档更加的印象深刻。当然,还有一些应用官网上说的很明确,这里不在重述。比如:
- 模块化管理:适用于复杂业务
- 表单的处理 :v-model引发的坑
- 调式logger:可以在控制台显示跟踪state变化前后的值
当然,这里仅仅总结一些常规使用,更深的应用还有待于实践中发掘吧,加油!