在vue的使用过程中,当单页应用越来越大的时候,项目可能会出现要使用一些公共的数据,vue也设计了vuex供开发者在开发vue单页应用时对应用公共数据进行一个更好的管理。
当然,在vue的项目中,使用vuex不一定是必要的,看项目需要。
what
vuex是一个vue的数据仓库,因为vue是组件化开发,数据在组件内是局部的,如果需要做数据共享,比如登录的用户信息,其实所有的地方都可能会用到,这个时候抽离出来是很有必要的。
数据流动
vuex是一个统一的数据管理,数据是通过vuex定义的规则来进行流动的。
vuex中数据只能通过mutation来提交,mutation只能进行同步操作,action进行异步操作。
核心
vuex提出了这几个核心的概念
- state
- getter
- mutation
- action
state
state就是数据源,存储着我们定义的公共数据
在state中,存储着我们要的公共数据,在vue组件中,我们可以通过computed来获取state数据,当state改变时,computed也会随之更新。
// 定义
state: {
userName: 'binnie'
}
// 使用
computed: {
userName() {
return this.$store.state.userName
}
}
复制代码
getter
getter,顾名思义,其实就是获取数据,当然,如果要原封不动的state数据,直接获取就好了。如果要获取的数据是对state数据进行操作后返回,我们可以在computed里面操作,也可以看getter里面处理,看需求情况。getter属于统一处理。
// 定义
getters: {
userNamelen: state => {
return state.userName.length
}
}
// 使用
computed: {
userNamelen() {
return this.$store.getters.userNamelen
}
}
复制代码
mutation
vuex中,只有mutation可以修改state的数据,并且mutation的修改只能是同步的。
// 定义
mutations: {
userName(state, payload) {
state.userName = payload.userName
}
}
// 提交修改
store.commit('userName', { userName: 'change'})
复制代码
action
mutation只能进行同步操作,异步操作的话就要放到action中处理。
// 定义
actions: {
userName(context) {
fetch().then((name) => {
context.commit('userName', { userName: name})
})
}
}
// 提交修改
store.dispath('userName', {})
复制代码
写在最后
vuex作为vue的数据管理仓库,方便了我们对公共数据的管理。
当然,关于是否需要使用是看项目需要。当项目中的数据需要抽出公共数据的情况下使用是合适的;当项目较小或者数据基本不交叉,那就没有比较使用vuex了。