什么是Vuex
在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来,应用统一的方式进行处理,在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。如下图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/f4c5c2843aaa070a7d19f27eea9306a1.webp?x-image-process=image/format,png)
使用Vuex
安装:
npm install --save vuex
引入:
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
Vuex的组成部分
完整的应用Vuex开发的应用结构应该是这样的:
![](https://i-blog.csdnimg.cn/blog_migrate/529e28952fdcb7fd2e8fd8c4aae9b5d2.webp?x-image-process=image/format,png)
下面针对比较核心的部分进行说明。
State
State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store
对象,后期就可以使用this.$store.state
直接获取状态
//store为实例化生成的
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
这个store可以理解为一个容器,包含着应用中的state等。实例化生成store的过程是:
const mutations = {...};
const actions = {...};
const state = {...};
Vuex.Store({
state,
actions,
mutation
});
后续在组件中使用的过程中,如果想要获取对应的状态你就可以直接使用this.$store.state
获取,当然,也可以利用vuex
提供的mapState
辅助函数将state
映射到计算属性中去,如
//我是组件
import {mapState} from 'vuex'
export default {
computed: mapState({
count: state => state.count
})
}
这样直接就可以在组件中直接使用了。
Mutations
Mutations
的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state
。store.commit(mutationName)
是用来触发一个mutation
的方法。需要记住的是,定义的mutation
必须是同步函数,否则devtool中的数据将可能出现问题,使状态改变变得难以跟踪。
const mutations = {
mutationName(state) {
//在这里改变state中的数据
}
}
在组件中触发:
//我是一个组件
export default {
methods: {
handleClick() {
this.$store.commit('mutationName')
}
}
}
或者使用辅助函数mapMutations
直接将触发函数映射到methods
上,这样就能在元素事件绑定上直接使用了。如:
import {mapMutations} from 'vuex'
//我是一个组件
export default {
methods: mapMutations([
'mutationName'
])
}
Actions
Actions
也可以用于改变状态,不过是通过触发mutation
实现的,重要的是可以包含异步操作。其辅助函数是mapActions
与mapMutations
类似,也是绑定在组件的methods
上的。如果选择直接触发的话,使用this.$store.dispatch(actionName)
方法。
//定义Actions
const actions = {
actionName({ commit }) {
//dosomething
commit('mutationName')
}
}
在组件中使用
import {mapActions} from 'vuex'
//我是一个组件
export default {
methods: mapActions([
'actionName',
])
}
Getters
有些状态需要做二次处理,就可以使用getters
。通过this.$store.getters.valueName
对派生出来的状态进行访问。或者直接使用辅助函数mapGetters
将其映射到本地计算属性中去。
const getters = {
strLength: state => state.aString.length
}
//上面的代码根据aString状态派生出了一个strLength状态
在组件中使用
import {mapGetters} from 'vuex'
//我是一个组件
export default {
computed: mapGetters([
'strLength'
])
}
Plugins
插件就是一个钩子函数,在初始化store
的时候引入即可。比较常用的是内置的logger插件,用于作为调试使用。
import createLogger from 'vuex/dist/logger'
const store = Vuex.Store({
...
plugins: [createLogger()]
})
最后,还有一些高级用法,如严格模式,测试等可能使用频率不会特别高。有需要的时候查官方文档就可以了。总的来说,Vuex还是相对比较简单的,特别是如果之前有学过Flux,Redux之类的话,上手起来更加容易。