vuex - 基础篇

328 阅读2分钟

在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了。